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

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/