Home/ Questions/Q 7612289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:52:23+00:00

I’m creating a webpage-head that contains a menu. The menu’s background-color differs from the

  • 0

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)

Edit: 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 above 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;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have updated this for you. Please see this fiddle 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.

    • 0