Question

I have a simple accordion menu working using jQuery but I’m having trouble styling it so each element casts a shadow on each subsequent one. The menu is comprised of an unordered list where each element is a link that triggers a slideDown/Up on click revealing/hiding a section. All I want is each heading, the orange boxes, to cast a shadow on the one after it but it seems no amount of z-indexing can overcome the defaults set by the list (if I remove the list backgrounds or make the shadows go up instead of down I can see them).

Here you can see I’ve tried everything I can think of to make things order correctly. I’ve z-indexed both the list elements and the anchors in descending order but still no luck. Anyone know how to get box shadows to work correctly here? You can see the last items shadow looks find, I want beneath each item.

Answer 1

Actually you are so close…

Causes:

1. stack order covered the shadow
2. z-index only work with element with position other than static

So, the solution will be:
For the element using z-index, add position:relative. So add one more rule should help:

ul#menu li, 
ul#menu li a {
    position:relative
}

It should be okay for most browser except IE, which have some little trouble in order to support negative z-index and position: relative – but since they don’t have nice box-shadow, you may ignore them.

Alternative: If you hate to use z-index for every li, you may prefer inset box-shadow,

ul#menu li a { 
    box-shadow:inset 0px 6px 13px #777;
}

Shadow is weaker and the browser support is much more narrow (latest modern browser) but it is easier for coding.

p.s. for this question, add a CSS tag will help a lot.