在最大宽度容器内采用全宽的下拉菜单答案

【问题标题】：Dropdown Menu that takes full width inside a Max Width Container在最大宽度容器内采用全宽的下拉菜单
【发布时间】：2020-02-20 09:52:01
【问题描述】：

我在导航中有一个下拉菜单。其父级的最大宽度为 500 像素。我希望下拉菜单在整个页面上打开。

我尝试使用 100vw，但这样下拉列表没有正确对齐。此外，我无法将导航栏移到最大宽度容器之外。

在此处查看代码 - https://codepen.io/chiragjain94/pen/Vwwbwop?editors=1100

<div class="max">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Photoshop</a>             </li>
          <li><a href="#">Illustrator</a>           </li>
        </ul>
      </li>
      <li><a href="#">User Experience</a></li>
    </ul>
  </nav>

CSS

.max{
 max-width:500px; 
  margin: 0 auto;
}
nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}

nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;

}


nav ul li {
  display: inline-block;
}


nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}

nav ul li:hover {
  background: #333333;
}


nav ul li:hover > a{
    color:#FFFFFF;
}

nav ul li:hover > ul {
  display:block;
}

nav ul ul {
  background: red;
  padding:0;
  text-align: center;
  display:none;
   width: 100vw;
  position: absolute;
  top: 60px;
  left:-0px;
  right:0px;

}

下拉菜单的宽度为 100vw，但我怎样才能将它放到整个页面的左侧 0 处？？

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

从nav 中删除position: relative。

如果父元素的位置设置为relative，则具有position: absolute 的子元素假定相对于其父元素的绝对位置。

.max{
 max-width:500px; 
  margin: 0 auto;
}
nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
}

nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;

}


nav ul li {
  display: inline-block;
}


nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}

nav ul li:hover {
  background: #333333;
}


nav ul li:hover > a{
    color:#FFFFFF;
}

nav ul li:hover > ul {
  display:block;
}

nav ul ul {
  background: red;
  padding:0;
  text-align: center;
  display:none;
   width: 100vw;
  position: absolute;
  top: 60px;
  left:-0px;
  right:0px;
    
}

<div class="max">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Photoshop</a>             </li>
          <li><a href="#">Illustrator</a>           </li>
        </ul>
      </li>
      <li><a href="#">User Experience</a></li>
    </ul>
  </nav>

【讨论】：

正是我想要的。谢谢:)
@Chirag np。 fwiw，relative 通常是大多数浏览器中的默认 position（即使 MDN 说默认值是 static？）或者元素的行为就像默认情况下是 position: relative
非常感谢@oldboy 我想知道我的大众汽车出了什么问题。
@Mohsin np！兄弟

【解决方案2】：

请更改“导航”类样式或删除位置..

css

nav {
  position: static;
}

【讨论】：