javascript - 使用 Html 和 Css 创建下拉菜单但如果使用 div 分区页面则无法导航到所有子菜单

Question

我正在使用 Html 和 Css 创建垂直方向的下拉菜单，如下所示。

 [http://jsfiddle.net/techspartan/8u8NH/][1]

我正在使用 div 将我的页面分成两部分，这样菜单显示在左侧，然后是剩余空间中的一些内容。例如，如果网页的宽度是 1024px，那么我将 200px 分配给菜单，其余 824px 分配给具有内容的 div。但是在使用 div 之后，我无法导航到子菜单“3.4.1”和“3.4.2”，如 url 中所示。上面张贴我可以理解这是因为子菜单正在跨越分配给它的空间。

那么我该如何解决这个问题，我不想为我的菜单分配更多的宽度，而该菜单应该跟在内容之后。

我们非常欢迎任何帮助。谢谢。

Answer 1

快速修复是确保导航的 Z-Index 高于内容的 Z-index。

它在您的 fiddle 中关闭的原因是，一旦您触摸文本，您就不再将鼠标悬停在导航栏上，而是悬停在文本上。

#nav li {
    background-color: #000000;
    margin-top: 1px;
    position: relative;
    width: 125px;
    border-radius: 15px;
    z-index:10;
}

增加 #nav li 上的 z-index 可以解决此问题。

Fiddle