CSS3 - menu element behind its parent?

Like in the title.

I have three level menu and want it to look like:

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

But third level items are displaying just behind the other items.

I added huge 50px red frame to them, so you will be able to see what's the point:

http://jsfiddle.net/TQH9v/

I'm a bit sleepy and tired & have to finish this code today, so sorry for so many s开发者_运维百科tupid questions. At least easy reputation points :P

Thank you :)

Your CSS has a lot of superfluous stuff in it so I'm not going to edit it exactly.

What you need to learn about is the wonderful z-index model. You never mentioned if you wanted this to work in IE, so I will just explain it for real browsers.

First, add position: relative; for all LI elements. Something like

#page-navigation li { position: relative; }

will work.

Now, add a z-index to each UL element that contains a "popup" menu and set it to a z-index that is higher than the parent LI. If you do not set the z-index, it will default to 0.

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

If you want this to work in IE, you must set the parent LI to a higher z-index than it's contained popout UL. This is just how stupid IE works. http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/