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

时间:2010-11-17 02:04:42

标签: css menu css3

喜欢标题。

我有三级菜单,希望它看起来像:

[ 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

谢谢:)

1 个答案:

答案 0 :(得分:0)

你的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/