Nested lists and z-index

Question

I'm building a navigation menu for a website and the menu has submenus. When the submenu slides down, it needs to lie behind the main navigation. I've tried using z-index but it won't work. Since the submenu is a child of the LI, is it not able to lie behind?

The code is a bit verbose due to the image sprite, so I'll link to a pastie:

http://pastie.org/1100075

And here's some images to support my explanation.

Desired outcome: http://imgur.com/WeU5T.png

Current outcome: http://imgur.com/0ZC4v.png

Answer 1

Move the li.home a link out side of ul.nav, and put it inside of an absolutely positioned block element with a z-index > 0.