I'm creating a webpage-head that contains a menu. The menu's background-color differs from the heads' background-color and in order to have the desired box-shadow on the full head, I created a child-div that fills the whole area of the parent-div and added the box-shadow to it.
The problem is, that mouse events are not recognized any more as there is a div above it. How can I achieve that I can still hover and click on the menu?
http://jsfiddle.net/5u9yy/1/ - http://jsfiddle.net/5u9yy/13/
PS: I greatly appreciate tips on how to improve the HTML and CSS layout.
PS 2: Bizarre, it looked grate in Firefox itself, but with the JSFiddle wrapped around it some issues appear.. (ul height, head-width)
Editar: Added updated paste 13 where the ul is not transparent for better demonstration purpose. The box-shadow must be rendered on top of the ul!
Solution (thanks to TheWaxMan):
Instead of adding a div arriba everything to add the inset box shadow, we can give the
ul a box shadow. To get the effect right, put an additional parameter to the box shadow property which offses it to the inner of the element and move the box shadow down accordingly.
/* mode offset-x offset-y blur offset-inner color */ box-shadow: inset 0 10px 10px -10px #000;
preguntado el 09 de marzo de 12 a las 22:03
I have updated this for you. Please see this violín I have set position: relative on the ul because the z-index property only works when the position is set. I have then set the z-index of the ul to 2 and of the div to 1 so it is rendered behind the ul.
EDIT: I have made a couple more changes to the css. As it stands there are 4 extra lines added. position & z-index on the ul, box-shadow on the li and z-index on the div. It now looks like the box shadow from the div blends into the links. Slightly messier than the first solution, but it works.
All I did is do some shuffling of the divs to nest them, rather than causing them to be positioned one over the top of the other. This is cleaner than having the absolute positioning.
Changed headOverall to sort of a "container" of the menu stuffs, changed it to position relative, and voila.