导航菜单的z-index / border相关问题

Question

http://jsfiddle.net/FS4zT/

如果您访问上面的链接，您会看到下面的内容。 简介：我已将子菜单的z-index设置为99，将z-index顶级菜单设置为9 .. 所以基本上我在思考当我将鼠标移动到第一个菜单时，当我将鼠标移动到子菜单的项目上时，第一个子菜单将保持聚焦。

但是出于某种原因，在Firefox 11.0中，当我尝试将鼠标移动到第一个子菜单的第2 /第3 /第4项时，它会切换到第2个顶级菜单。

在IE 7中：它可以正常工作，我仍然可以看到第二个顶级菜单的边框与子菜单的项目重叠，即使它们的z-index更高。在Firefox中甚至可以看到边界问题。

有人可以说明我可能出错的地方吗？

Answer 1

这应该解决它，我希望。

#menu li ul li { 
position: relative;
}

Answer 2

注意z-index的堆叠上下文。您想要的不适用于父子z-indices。

问题是子菜单的父li没有子菜单那么宽（小4倍）。因此，如果您将鼠标悬停在右侧，li将失去焦点。

解决此问题的一种方法是在z-index: 0子菜单上设置ul，在当前子菜单上设置z-index: 1。子菜单应该有position: absolute。

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

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;
}