CSS div重叠，鼠标事件在其下面不被识别

我正在创建一个包含菜单的网页头。菜单的背景颜色与头部的背景颜色不同，为了让所需的盒子阴影完整，我创建了一个填充父div的整个区域的子div，并添加了box-shadow到它。CSS div重叠，鼠标事件在其下面不被识别

问题是，鼠标事件不再被识别，因为它上面有一个div。我怎样才能做到这一点，我仍然可以悬停并点击菜单？

http://jsfiddle.net/5u9yy/1/ - http://jsfiddle.net/5u9yy/13/

PS：我非常感激，关于如何提高HTML和CSS布局的技巧。
PS 2：离奇，在Firefox本身看起来篦，而是用的jsfiddle包裹它的周围出现了一些问题。（UL高度，头宽）

编辑：添加更新糊其中为了更好的演示目的，ul不透明。盒子阴影必须呈现在ul上方！

解决方案（感谢TheWaxMan）：
而不是添加上述一切DIV 添加插图框阴影，我们可以给ul一个盒子阴影。为了得到正确的效果，在box shadow属性中添加一个额外的参数，将其偏移到元素的内部，并相应地将box阴影向下移动。

/* mode offset-x offset-y blur offset-inner color */ box-shadow: inset 0 10px 10px -10px #000;

2012-03-09 Niklas R

我已经为你更新了这个。请看这fiddle我已经设置了位置：ul上的相对位置，因为z-index属性仅在位置设置时才起作用。然后，我将ul的z-index设置为2，将div的z-index设置为1，以便将它显示在ul后面。

编辑：我做了几个更改的CSS。就目前而言，增加了4条额外的线。位置& z-index上的ul，box-shadow和div上的z-index。它现在看起来像div的盒子阴影混合到链接中。稍微比第一个解决方案更混乱，但它的工作原理。

2012-03-09 22:30:10 Andrew

对他的代码的最小改变量+1。 – 2012-03-09 22:34:53

我总是想知道为什么'z-index'的设置不总是有效，谢谢。 xD无论如何，这确实解决了事件，但这样我就不需要'

'。使用'z-index'在'ul'背后渲染box-shadow。 *设置ul的背景颜色不太透明，以便更清晰地看到效果* – 2012-03-09 22:45:15

我明白了。你有没有尝试在李的内部添加一个箱子阴影？看看这个，看看你的想法：[小提琴]（http://jsfiddle.net/TheWaxMann/5u9yy/14/） – Andrew 2012-03-09 22:57:15

好看。

我所做的只是对div进行一些洗牌来嵌套它们，而不是让它们位于另一个的顶部。这比绝对定位更清洁。

改变headOverall菜单stuffs的“容器”，改变它的位置相对，瞧。

2012-03-09 22:32:38

感谢您的帮助，但是与上面相同。它可能不是很明显，但箱形阴影仍然在'ul'后面呈现。我认为...应该增加用于示范目的的半透明度;） – 2012-03-09 22:51:11

回答