Question

I’ve created collapsible links for navigating my page. All menu items in my navigation bar (vertical, nav div left floated) are also their own div (necessary for collapsing). Each div is styled as a button with text.

I’ve used a light colored box_shadow with a relatively large blur radius for the :hover pseudo-element. Now, when I hover over each button/div, it looks like the button/div is lit up (good) and the light spills out over the button/div above it (also good). Unfortunately, the button/div below the one I am hovering over appears to be floating OVER the lit area (not so good).

Is there a way I can get the box_shadow styling to overlap both divs above and below the div the cursor is hovering over? Other links in my site will not be affected, as the styling only applies to the divs and not to the links.

I’m 99% of the way to a perfect (IMO) design, but this one little issue seems to have no answer anywhere in the tutorials I normally use as a reference, or anywhere else for that matter.

Fiddle: http://jsfiddle.net/nrkYr/5/embedded/result/

Image: http://desolosubhumus.webs.com/div%20overlap.jpg

Div CSS:

.mH { cursor: pointer; width: 110px; background-color: #A0522D; color: #000000; font-family: "DreamerOne","sans-serif"; text-shadow: -1px -1px 1px #fc9c47, 1px 1px 1px #fc9c47, 1px 1px 2px #300b00; border: 0 solid #210a02; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #210a02; }

.mH:hover { cursor: pointer; width: 110px; background-color: #F5A77F; font-family: "DreamerOne","sans-serif"; color: #c96914; text-shadow: -1px -1px 1px #210a02, 1px 1px 1px #210a02, 1px 1px 2px #000000; border: 0 solid #876e68; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #432c24, 1px 1px 35px 1px #D87824, -1px -1px 35px 1px #D87824; }

*Update: Needing the vendor prefixes WAS a bug on my end. I downloaded both browsers again and reinstalled, and now box-shadow and border-radius work on all four browsers (Safari just crashes when I navigate away from the default ‘buy Apple stuff’ page, or else I’d test it, too). I’ll update the CSS here and on Fiddle in just a sec. G’bye cruft…

Answer 1

Add a z-index to elevate it over the others, and position: relative to make it use the z-index.

For example, add to .mH, position: relative and to .mH:hover, z-index: 100.

End result: http://jsfiddle.net/nrkYr/6/