z-index not working with css3 drop down nav

Question

I am modifying a css3 nav that i found in a tutorial and I am having trouble with the z-indexing.

Please check out the nav here:

http://cafemeetup.com/testArea/nav/

If you rollover either of the 2 nav items, you can see that the z-indexing of the drop down box is higher than the link that spawned it. This is not true as I have made the z-index of the rollover box lower in the stacking order.

What I am trying to achieve is to have the drop down box fall underneath the link so the the drop shadow of the drop down box is not visible on top. I want the link and drop down box to meld into one and I think by making the link sit on top of the drop down box, I can achieve this.

It is done here at Shopify:

http://www.shopify.com/ (rollover 'resources')

Anyway, hope someone can shed light on this. I am assuming that the problem lies in the fact that the object I am trying to add z-indexes to are hovers and also that they are not regular divs as such.

Anyway, thank you for at least reading all this. I appreciate your time, James

Answer 1

You are applying your z-index:999 to the <li class="menu_right"> and then applying z-index:1 to the <div class="dropdown_1column align_right"> child element. If you want it to appear underneath the <li> , make it a sibling, not a child.

Answer 2

I made a demo for you on jsFiddle. Try moving your background and z-index style to the .drop link instead of the list item in your code and it should work.

http://jsfiddle.net/sTsrb/