Question

I’ve set the <li> tags in a list to have a drop shadow when hovered. However, for all but the last <li>, the shadow is partially hidden by the next <li> element. See my example JSFiddle:

- http://jsfiddle.net/Stasonix/B9gn2/

I need the shadow to appear on top of the sibling <li>s, like the last <li> already does. How can I achieve that?

Answer 1

Here you go: http://jsfiddle.net/B9gn2/1/

Position the <li>s relatively, give them a z-index of 1 when hover state is active, and 0 when not. This layers the shadows on top of one another.

Hope this helps.