Nav UL 项目横跨页面

Question

我正在处理一个简单的静态页面，我的导航栏几乎是正确的。现在，菜单项在整个导航栏的宽度上延伸，而不是留在它们的 "list area" 中，如果这有意义的话。我觉得我已经尝试了所有方法，我认为这与我在导航和照片轮播上的 z-index（以便导航菜单项显示在轮播顶部）和定位有关，但是我想不通。

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>

Answer 1

发生这种情况是因为您将下拉列表 ul 的宽度设置为 100%。

像这样添加宽度：

width: auto;

参见 fiddle here。

Answer 2

这是因为您将 width: 100% 设置为 .nav ul ul。如果您希望宽度保持可变，请在 .nav ul ul

中将 width: 100% 设置为 width: auto

此处示例：http://codepen.io/anon/pen/MaRJXZ

Nav UL 项目横跨页面

Nav UL items stretch across page

html

css

navigation