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

Question

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

我尝试使用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？

Answer 1

从position: relative中删除nav。

如果将父级的位置设置为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>

Answer 2

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

css

nav {
  position: static;
}