Z-index: How to make nested elements appear underneath their parent element

Question

This fiddle should demonstrate the issue:

http://jsfiddle.net/5sqxQ/2/

I want the sub menu to appear underneath the parent menu. I was then was looking to extend this with JavaScript to slide the menu from underneath on hover of the parent li element.

Not fussed about the JavaScript but can't figure out how to style the elements to achieve the desired layering.

Answer 1

It doesn't work because you are applying a z-index to the parent element which makes the child element stack relative to the other elements within the parent.

Once you assign an element a value for z-index (other than auto), that element establishes its own local stacking context. This means that all of the element's descendants have their own stacking order, relative to the ancestor element.

So if the parent has z-index: 9 and the child is z-index: 8, it's kind of like assigning a z-index of 9, 8

See the article here for a better explanation.

If you remove the z-index on the parent and set the sibling element to z-index: -1, that should work. I'm not sure about all browsers, but it works in Chrome anyway.

Here is the updated fiddle

Hope that helps.

Answer 2

You don't.

Instead, make the a be the "Sign In" "button".

Something like this: http://jsfiddle.net/5sqxQ/15/