Question

In a nav menu, I’m trying to get selected nav items to display a drop-shadow that is shared with a div that appears attached to the selected nav item.

I’ve seen a few people accomplish something similar, but nothing exactly, and emulating their ideas isn’t getting me there. I’ve tried relying on the z-index and positioning, and overflow and padding, but am just not seeing how to achieve this.

Here’s what I’m trying to do:

I need the tab and dependent div to appear to share the box-shadow. Instead what happens is:

http://jsfiddle.net/dilettante/ctHBe/

Any answer? Hoping this is something simple that I’ve overlooked… many thanks for any ideas.

Answer 1

What about adding another element with white background to cover the shadow. Nasty but should work…
http://jsfiddle.net/ctHBe/3/