与导航菜单相关的 z-index / 边框问题

Question

http://jsfiddle.net/FS4zT/

如果您访问上面的链接，您将看到下面所描述的内容。 概述：我已将子菜单的z-index设置为99，顶级菜单的z-index设置为9。 因此，基本上当我将鼠标移动到第一个菜单时，第一个子菜单将保持焦点，当我将鼠标移动到子菜单的项目上时。 但由于某种原因，在Firefox 11.0中，当我尝试将鼠标移到第一个子菜单的第二个/第三个/第四个项目上时，它会切换到第二个顶级菜单。

在IE 7中：它按预期工作，但我仍然可以看到第二个顶级菜单的边框重叠在子菜单的项目上，即使它们的z-index更高。这个边框问题甚至在firefox中也可以看到。

有人能否解释一下我可能错了的地方？

- Prathamesh Gharat

Answer 1

希望这可以解决问题。

#menu li ul li { 
position: relative;
}

- safrazik

---

请问您能否解释一下为什么设置position: relative;可以使其正常工作？ - Prathamesh Gharat

不用谢 :) HTML 元素默认情况下是静态定位。静态定位的元素总是根据页面的正常流进行定位。静态定位的元素不受 top、bottom、left、right 和 z-index 属性的影响。参考资料：CSS 定位，z-index。 - safrazik

这个答案和 "background-color: white" 对我有用。 - Lucas Simões

Answer 2

注意z-index的堆叠上下文。对于父子z-index，您想要的效果可能无法实现。

问题在于子菜单的父级li不像子菜单那样宽（小了4倍）。因此，如果您向右悬停，li将失去焦点。

解决方法之一是在所有ul子菜单上设置z-index: 0，并在当前子菜单上设置z-index: 1。子菜单应该具有position: absolute。

更新：使用position: relative的解决方案（被接受的答案）确实非常好。这有效的原因是子菜单的li不会使父容器变大，因为它们是左浮动的。

- Frank van Wijk

---

我认为你还没有访问我提供的链接，我使用显示属性来显示或隐藏子菜单。 - Prathamesh Gharat

Answer 3

您需要更改 #menu li 中的高度。

#menu li {
    width: 140px;
    height: 25px;
    float: left;
    border-right: 1px inset white;
    z-index: 9;
}

另一种保持边框为50px的方法是在CSS中添加类似于以下内容的代码。

#menu li:hover ~ li{
    height:25px;
}

- Sven Bieder

---

我需要顶级菜单项的边框具有50像素高的垂直左右边框。 PS：子菜单项应该也有边框。 - Prathamesh Gharat

问题已经被mrsafraz解决了，虽然感谢Sven的帮助。顺便问一下， ~ 是兄弟选择器吗？ - Prathamesh Gharat

是的，它是用于选取所有兄弟元素的兄弟选择器。 - Sven Bieder