CSS div se superpone, el evento del mouse no se reconoce debajo de él

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

2 Respuestas

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.

respondido 09 mar '12, 23:03

I always wondered why setting of z-index doesn't always work, thanks. xD Anyway, this does fix the events, but that way I wouldn't need the <div class="headOverall></div> because I could set the box-shadow to the <div id="head">..</div>. The box-shadow renderes behind the ul usando el z-index. Set the background-color of the ul to be less transparent to see the effect more clearly - niklas r

I see. Have you tried also adding a box-shadow to the inside of the li? Have a look at this one and see what you think: violín - Andrés

Ignore the last one, it was only on the hover. I have altered it now and made it only along the top. This should do it fiddle rev 15 - Andrés

@TheWaxMann That's perfect. That actually doesn't require the div.headOverall, I didn't know about the additional argument you set to -3px on box-shadow. ¡Gracias! - niklas r

Btw, do you know how I can make the header scale over the full width? It stops at the width of the screen, but the site is larger and the header doesn't scale .. :/ Thanks! - niklas r

Nice looking.

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.

http://jsfiddle.net/xnJQ9/

respondido 09 mar '12, 22:03

Thanks for your help, but same as above. It might not be very noticeable, but the box-shadow still renders behind the ul. I should've increased the semi-transparence for demonstration purpose, I think .. ;) - niklas r

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.