下拉菜单与其他菜单重叠

Question

我做了一个下拉导航菜单，它也部分地悬停在旁边。但当我将鼠标悬停在旁边的下拉菜单部分时，导航栏会崩溃，我最终选择了旁边。另外一部分是在nav子菜单上。

此图显示重叠。当将鼠标移动到左半边，进入灰色的旁边区域但仍然在导航子菜单上时，橙色的一个正在盘旋，“统计”子菜单崩溃，“数据表”链接被选中。

我用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。