html - 如何在具有一致背景的整个导航栏上制作多级下拉列表

Question

我一直在努力制作一个多级下拉导航栏，当下拉菜单终于开始工作时，导航的其余部分就坏了。

我试图获得一个宽度为主体 100% 的导航栏，然后是一个宽度为主体 80% 的容器

#nav {
   width: 100%;
   background-color: red;
 }
.container {
   width: 80%;
 }

但是，在使下拉菜单起作用之后，导航的背景色(红色)不再显示，并且下拉列表的灰色区域仅跨越更小的区域。

如何让下拉列表/导航列表位于容器内(主体的 80%)，同时保持跨度一直跨越主体的 100% 宽度？请注意，颜色现在并不重要，只要设置正确的距离即可。

这是一个CodePen

和片段

#nav {
  width: 100%;
  background-color: red;
}
.container {
  width: 80%;
}

.third-level-menu {
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.third-level-menu > li {
  height: auto;
  background: #999999;
}
.third-level-menu > li:hover {
  background: #cccccc;
}

.second-level-menu {
  z-index: 2;
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.second-level-menu > li {
  position: relative;
  height: 30px;
  background: #999999;
}
.second-level-menu > li:hover {
  background: #cccccc;
}

.top-level-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 2;
  float: left;
  line-height: normal;
  text-align: center;
  height: auto;
}

.top-level-menu > li {
  display: inline-block;
  position: relative;
  float: left;
  height: 30px;
  width: 100px;
  background: #999999;
}
.top-level-menu > li:hover {
  background: #cccccc;
}

.top-level-menu li:hover > ul {
  display: inline;
}

.top-level-menu a {
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: none;
  padding: 0 0 0 10px;
  display: block;
  line-height: 30px;
}
.top-level-menu a:hover {
  color: #000000;
}

<nav id="nav">
  <div class="container">
    <ul class="top-level-menu">
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
          <li><a href="#">Chicago</a></li>
          <li><a href="#">Los Angeles</a></li>
          <li>
            <a href="#">New York</a>
            <ul class="third-level-menu">
              <li><a href="#">Information</a></li>
              <li><a href="#">Book a Meeting</a></li>
              <li><a href="#">Testimonials</a></li>
              <li><a href="#">Jobs</a></li>
            </ul>
          </li>
          <li><a href="#">Seattle</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 1

将您的 CSS 更改为如下所示:

#nav{
    position: absolute;
    top: 0px;
    left: 0px; // setting left and right to 0px will make the container take up the entire page
    right: 0px;
    background-color: red;
}

此外，如果您希望导航栏中的元素居中，请将以下代码行添加到当前样式表中。

.container{
    margin: 0 auto; // center the container
}
.top-level-menu{
    width: 100%; // make the width of the menu 100% of the container
}
.top-level-menu li{
    width: 25%; // make the width of each li element 25% of the container (100% / 4 li = 25%)
}