Question

喜欢标题。

我有三级菜单，希望它看起来像：

[ FIRST LEVEL ITEM ]
--------------------
[ SECOND LEVEL ITEM ]
[ SECOND LEVEL ITEM ]
[ THIRD LEVEL ITEM ]
[ SECOND LEVEL ITEM ]
[ THIRD LEVEL ITEM ]
[ SECOND LEVEL ITEM ]

但是第三级项目显示在其他项目的后面。

我为他们添加了巨大的50px红框，所以你将能够看到重点：

http://jsfiddle.net/TQH9v/

我有点困倦和疲惫今天必须完成这个代码，很抱歉这么多愚蠢的问题。至少容易声誉点：P

谢谢：）

Answer 1

你的CSS中有很多多余的东西，所以我不打算完全编辑它。

您需要了解的是精彩的z-index模型。你从来没有提到过你是否想在IE中使用它，所以我只是为真正的浏览器解释它。

首先，为所有LI元素添加position: relative;。像

这样的东西

#page-navigation li { position: relative; }

会奏效。

现在，将z-index添加到包含“弹出”菜单的每个UL元素，并将其设置为高于父LI的z-index。如果未设置z-index，则默认为0。

https://developer.mozilla.org/en/understanding_css_z-index

如果您希望在IE中使用它，则必须将父LI设置为比其包含popout UL更高的z-index。这就是IE工作的愚蠢行为。 http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

CSS3 - 其父级背后的菜单元素？

1 个答案: