HTML 和 CSS 导航菜单问题答案

【问题标题】：HTML and CSS navigation menu woesHTML 和 CSS 导航菜单问题
【发布时间】：2012-02-16 06:47:11
【问题描述】：

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

例如，在下面的链接中，“测试裁剪”处于活动状态，但我无法点击下面的两个链接，我在 HTML 或 CSS 中看不到问题，我认为该错误仅在 Firefox 中很明显，这里是链接http://apigroup.factoryagency.co.uk/browse-products/laminate-board-paper/Test-Crop

【问题讨论】：

你能把你的 css 和 HTML 的可读性放在一个小提琴吗？ jsfiddle.com

标签： html css navigation

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是因为你有这个 CSS：

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

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

解决方案是给第一个 div.wrapper 一个更高的 z-index。您可以通过给它一个 ID，然后在该 ID 上设置 z-index 来做到这一点。

【讨论】：