css - 有没有办法让 box_shadow 效果重叠所有附近的元素？

Question

我已经创建了用于浏览我的页面的可折叠链接。我的导航栏中的所有菜单项(垂直，nav div 左浮动)也是它们自己的 div(折叠所必需的)。每个 div 的样式都设置为带有文本的按钮。

我为 :hover 伪元素使用了具有相对较大模糊半径的浅色 box_shadow。现在，当我将鼠标悬停在每个按钮/div 上时，看起来按钮/div 被点亮(好)并且光线溢出它上面的按钮/div(也好)。不幸的是，我悬停的按钮/div 下方的按钮/div 似乎漂浮在照明区域上方(不太好)。

有没有办法让 box_shadow 样式与光标悬停的 div 上方和下方的 div 重叠？我站点中的其他链接不会受到影响，因为样式仅适用于 div 而不适用于链接。

我已经完成了 99% 的完美 (IMO) 设计，但是这个小问题似乎在我通常用作引用的教程中的任何地方或与此相关的任何其他地方都没有答案。

fiddle :http://jsfiddle.net/nrkYr/5/embedded/result/

图片:http://desolosubhumus.webs.com/div%20overlap.jpg

分区 CSS:

.mH { cursor: pointer; width: 110px; background-color: #A0522D; color: #000000; font-family: "DreamerOne","sans-serif"; text-shadow: -1px -1px 1px #fc9c47, 1px 1px 1px #fc9c47, 1px 1px 2px #300b00; border: 0 solid #210a02; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #210a02; }

.mH:hover { cursor: pointer; width: 110px; background-color: #F5A77F; font-family: "DreamerOne","sans-serif"; color: #c96914; text-shadow: -1px -1px 1px #210a02, 1px 1px 1px #210a02, 1px 1px 2px #000000; border: 0 solid #876e68; border-radius: 1em; font-size: 0.9em; font-weight: bold; text-align: center; margin: 1px; box-shadow: inset 0 0 4px 4px #432c24, 1px 1px 35px 1px #D87824, -1px -1px 35px 1px #D87824; }

*更新:需要供应商前缀是我这边的一个错误。我再次下载并重新安装了这两个浏览器，现在 box-shadow 和 border-radius 在所有四个浏览器上都可以使用(当我离开默认的“购买苹果产品”页面时，Safari 会崩溃，否则我也会测试它) .我将在几秒钟内更新此处和 Fiddle 上的 CSS。再见了……

Answer 1

添加 z-index 以将其提升到其他位置之上，并添加 position: relative 以使其使用 z-index。

例如，添加到.mH, position: relative 和添加到.mH:hover, z-index: 100 。

最终结果:http://jsfiddle.net/nrkYr/6/