html - Nav UL元素跨页延伸

我正在一个简单的静态页面上工作，几乎使导航栏正确。现在，菜单项在整个导航栏的宽度范围内延伸，而不是保留在它们的“列表区域”中（如果有意义）。我觉得我已经尝试了所有方法，并且我认为它与导航和照片转盘上的z索引（以便导航菜单项显示在转盘上）和位置有关，但是我不知道。

nav ul {
  background: #A6CE4F;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0px;
  list-style: none;
  position: relative;
  display: inline-table;
  width: 100%;
  display: table;
}
nav ul ul {
  display: none;
  width: 100%;
  background: #f37b35;
  border-radius: 0px;
  padding: 0;
  position: absolute;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
}
nav ul li:hover > ul {
  display: block;
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  padding: 25px 40px;
  color: #1f354b;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  position: relative;
}
nav ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #e2550e;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

<nav style="position: relative; z-index: 2;">
  <ul>
    <li>
      <a href="">ICAB Leadership Group</a>
      <ul>
        <li><a href="">Requirements</a>
        </li>
        <li><a href="">Roles & Responsibilities</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="">Site Cabs</a>
      <ul>
        <li><a href="">Community Input</a>
        </li>
        <li><a href="">Cross Network Collaborations</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="">Community Toolbox</a>
      <ul>
        <li><a href="">Community engagement templates and documents</a>
        </li>
        <li><a href="">Network and Community fact sheets</a>
        </li>
        <li><a href="">Training materials</a>
        </li>
        <li><a href="">FAQs</a>
        </li>
        <li><a href="">Community Research Resources</a>
        </li>
        <li><a href="">Acronyms</a>
        </li>
        <li><a href="">Email Alias Lists </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="">Contacts & Email Lists</a>
    </li>
  </ul>
</nav>

最佳答案

这是因为您将下拉菜单ul的宽度设置为100％。

添加这样的宽度：

width: auto;

参见小提琴here。

关于html - Nav UL元素跨页延伸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33834964/