html - 下拉菜单与其他菜单重叠

Question

我制作了一个下拉导航菜单，它也部分悬停在旁边。但是，当我将鼠标悬停在旁边的下拉菜单部分时，导航栏会折叠，我最终选择了旁边。旁边的部分也位于导航子菜单之上。

这张图片显示了重叠。橙色的悬停，当将鼠标移动到左半边，进入灰色的旁边区域但仍在导航子菜单上方时，“统计”子菜单折叠并选择“数据表”链接。

我已经尝试了各种使用 z-index 和调整位置等的方法，但我不知道我做错了什么。

JSFiddle显示问题。

HTML:

<nav>
  <ul>
    <li><a href="/Default.aspx">Home</a></li>
    <li><a href="/Webpages/Stats/Graph.aspx">Stats</a>
      <ul>
        <li><a href="/Webpages/Stats/Graph.aspx">Graph</a></li>
        <li><a href="/Webpages/Stats/DataSheet.aspx">DataSheet</a></li>
        <li><a href="/Webpages/Stats/Print.aspx">Print</a></li>
      </ul>
    </li>
    <li><a href="#">Projects</a>
      <ul>
        <li><a href="#">View</a></li>
        <li><a href="#">Add</a></li>
        <li><a href="#">Edit</a></li>
      </ul>
    </li>
    <li><a href="/Webpages/Employees.aspx">Employees</a>
      <ul>
        <li><a href="#">View</a></li>
        <li><a href="#">Add</a></li>
        <li><a href="#">Edit</a></li>
      </ul>
    </li>
    <li><a href="#">Settings</a></li>
    <li><a href="/Webpages/About.aspx">About</a></li>
  </ul>
</nav>

<aside>
  <ul>
    <li><a>Graph</a></li>
    <li><a>Data sheet</a></li>
    <li><a>Print graph</a></li>
  </ul>
</aside>

CSS:

nav {
  background: black;
  width: auto;
  height: 50px;
  font-weight: bold;
}

nav ul {
  list-style: none;
}

nav ul li {
  height: 50px;
  width: 125px;
  float: left;
  line-height: 50px;
  background-color: #000;
  text-align: center;
  position: relative;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  display: block;
}

nav ul li a:hover {
  background-color: #ff6a00;
}

nav ul ul {
  position: absolute;
  display: none;
}

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

aside {
  float: left;
  width: 200px;
  height: 700px;
  background: grey;
}

aside input {
  background-color: red;
}

aside ul {
  list-style: none;
  /*no bulets*/
  height: 100%;
}

aside ul li {
  height: 50px;
  width: 100%;
  float: left;
  border-bottom: 1px solid black;
  line-height: 50px;
  text-align: center;
  position: relative;
}

aside ul li a {
  text-decoration: none;
  width: 100%;
  color: #fff;
  display: block;
}

aside ul li a:hover {
  background-color: #ff6a00;
  display: block;
}

Answer 1

将 z-index 添加到您的 nav ul 元素:

nav ul {
    list-style: none; /*no bulets*/
    z-index: 100;
}

Updated Fiddle

有关 z-index 样式及其作用的更多信息，click here .