HTML和CSS导航菜单问题

Question

我有一个由嵌套列表组成的垂直导航菜单，但是当子菜单处于活动状态时，该菜单下面的任何内容都无法点击。

例如在下面的链接中“test crop”处于活动状态，但是我无法点击下面的两个链接，我在HTML或CSS中看不到问题，我认为这个bug只在Firefox中出现，这里是链接http://apigroup.factoryagency.co.uk/browse-products/laminate-board-paper/Test-Crop

Answer 1

您的问题是因为导航菜单是.wrapper类的子节点，以及主内容区域，它们的z-index均为999.页面下方的.wrapper元素将采用z-index在这种情况下的优先权。正如您在下面的屏幕截图中看到的那样，主要内容区域有优势，测试公司标题与导航元素重叠。我会在主要内容区域添加一个额外的类，并指定一个小于999的z-index。

Answer 2

这是因为你有这个CSS：

.wrapper {
    clear: both;
    margin: 0 auto;
    position: relative;
    width: 944px;
    z-index: 1000;
}

有两个类包装器的div，具有相同的z-index。第一个包含导航。第二个包含大量的内容。第二个，因为它出现在页面的后面并具有相同的z-index，将出现在第一个上面。这意味着它覆盖了导航，防止被点击。

解决方案是给第一个div.wrapper一个更高的z-index。您可以通过为其提供ID，然后在该ID上设置z-index来完成此操作。