Question

我正在创建一个包含菜单的网页头。菜单的背景颜色与头部的背景颜色不同，为了在整个头部上有所需的盒子阴影，我创建了一个子div，它填充了父div的整个区域并添加了box-shadow它。

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

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

PS：我非常感谢有关如何改进HTML和CSS布局的提示 PS 2：奇怪，它看起来在Firefox本身，但在JSFiddle缠绕它出现一些问题..（ul高度，头宽）

编辑：添加了更新的粘贴 13 ，其中ul不透明，以便更好地进行演示。盒子阴影必须在ul！

之上呈现

解决方案（感谢TheWaxMan）：
我们可以为ul提供一个框阴影，而不是在上面添加div 所有内容来添加插入框阴影。要获得正确的效果，请在box shadow属性中添加一个附加参数，将其附加到元素的内部并相应地向下移动框阴影。

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

Answer 1

我已经为你更新了这个。请参阅此fiddle我在ul上设置了position：relative，因为z-index属性仅在设置位置时有效。然后我将ul的z-index设置为2，将div的z-index设置为1，以便在ul后面进行渲染。

编辑：我对CSS进行了一些更改。目前已添加4条额外的线条。位置和ul上的z-index，div上的box-shadow和div上的z-index。它现在看起来像div中的盒子阴影混合到链接中。比第一个解决方案稍微麻烦，但它确实有效。

Answer 2

好看。

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

将headOverall更改为菜单内容的“容器”，将其更改为相对位置，然后瞧。