box-shadow阴影被覆盖问题

Question

如上图，使用box-shadow发现了一个问题，类似图中上下相连的块级元素如果下方的元素有设置背景就会把上方元素的下阴影给覆盖掉，虽然用position:relative和z-index提高层数可以把阴影显示出来，但会影响子元素的absolute定位，所以有没有更好的方法？还有想知道造成这种效果的原因是什么，难道跟BFC有关？

补上正常的效果吧，上图就是箭头所示的外发光被覆盖掉了：

下面是实现图2正常效果的css，想知道有没有除此之外的方法？还有造成图1这种问题的原因？

#topmenu li:hover {
        height: 28px;
        line-height: 28px;
        background: #fff;
        border: 1px solid #dddddd;
        border-right: 0;
        box-shadow: 0 0 10px #ddd;
        -moz-box-shadow: 0 0 10px #ddd;
        -webkit-box-shadow: 0 0 10px #ddd;
        /*显示下边阴影*/
        position: relative;
        z-index: 3;
    }

Answer 1

li:hover{ transform: translate3d(0, 0, 0); }
开启gpu加速, 3d效果

Answer 2

1、这个是:hover之后出现的阴影，所以只要加上z-index：1；就行了，不需要定位设置
2、如果直接设置相连的块级元素的阴影，就需要给元素加position：relative或者在position：absolute，并且z-index大的覆盖小的

Answer 3

你的子元素哪用了什么absolute呀？？ 此外你在这串css代码里面加个left:0;试试

Answer 4

不要给遮住的灰色的条加背景色

Answer 5

请问这个问题解决了吗？我也遇到同样的问题。不知道为什么。

Answer 6

被忽略的那个回答，却是正确的回答！！！