如何使子菜单跨越浏览器窗口的全宽？

Question

我希望我的子菜单像下图一样跨越浏览器窗口的整个宽度：

我正在使用Bootstrap，我的主菜单也向右浮动。

我已经创建了一个演示，说明我到目前为止所做的事情。我怎样才能达到这个结果？

http://codepen.io/ifusion/pen/oLVVXj

Answer 1

首先，bootstrap 让你非常不灵活。因此，如果您想使用它，我建议将子菜单移出菜单元素，因为 width:100%; 取决于父级。所以应该比父元素更宽的所有东西都不应该是这个父元素的子元素。此外，position:absolute 依赖于具有position:absolute 或position:relative 的下一个父级。所以有很多事情并不容易。移动子菜单会更容易。在那里你可以使用width:100%; 和position:absolute 和left:0。

或者要使子菜单脱离页面流程，您可以使用position:fixed。和width:100%。查看 Codepen 了解此解决方案。我更喜欢第一个，即使它更多的工作。不过，固定定位有一些副作用，但也许对你来说并不重要。

Answer 2

位置绝对子将相对于最近的位置相对父定位，因此删除主菜单 li 的相对位置将解决此问题。还要从正文和 html 中删除填充和边距。

body, html{
  margin: 0;
  padding: 0;
}

.main-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  float: right;
}
.main-menu li {
  float: left;
}
.main-menu li a {
   display: block;
   background: #c2c2c2;
   padding: 20px;
   color: #337ab7;
   text-decoration: none;
}

.main-menu-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    padding: 0;
    list-style-type: none;
    background-color: black;
    text-align: center;
}
.main-menu-dropdown li {
  float: none;
  display: inline-block;
  margin-left: -4px;
}
.main-menu-dropdown li a {
  background: black;
  display: inline-block;
}

<div class="container">
    <div class="col-md-12">
        <ul class="main-menu">
            <li><a href="#">First item</a></li>
            <li>
                <a class="has-dropdown" href="#">Second Item</a>
                <ul class="main-menu-dropdown clearfix">
                    <li><a href="#">Sub item 1</a></li>
                    <li><a href="#">Sub item 2</a></li>
                    <li><a href="#">Sub item 3</a></li>
                </ul>
            </li>
            <li><a href="#">Third Item</a></li>
            <li><a href="#">Fourth Item</a></li>
        </ul>
        <div class="col-md-12">
        I need the sub menu to span the width of the browser
        </div>
    </div>
</div>

Answer 3

首先，子菜单的宽度受到限制，因为它的父元素有position: relative。

删除后，子菜单变为全宽，但项目仍左对齐。

在下面的示例中，我将.main-menu-dropdown 使用display: flex，然后将其中的项目居中。

http://codepen.io/adrianlynch/pen/RRddjk

.main-menu-dropdown {
  position: absolute;
  left: -15px;
  right: -15px;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: black;
}