手风琴菜单中的盒子阴影

Question

我有一个简单的手风琴菜单使用jQuery工作但是我在设置它时遇到了麻烦，因此每个元素都会在后续的每个元素上投下阴影。该菜单由一个无序列表组成，其中每个元素都是一个链接，在点击时触发slideDown / Up显示/隐藏一个部分。所有我想要的是每个标题，橙色框，在它之后投射阴影，但似乎没有数量的z索引可以克服列表设置的默认值（如果我删除列表背景或使阴影上升而不是下来，我可以看到它们。）

Here you can see I've tried everything I can think of to make things order correctly。我按降序对列表元素和锚点进行了索引，但仍然没有运气。任何人都知道如何让盒子阴影在这里正常工作？您可以看到阴影外观找到的最后一项，我想在每个项目下面。

Answer 1

其实你太近了......

原因：

1. 堆叠顺序覆盖阴影
2. z-index仅适用于position以外的static
的元素

所以，解决方案将是： 对于使用z-index的元素，请添加position:relative。因此，添加一条规则应该有所帮助：

ul#menu li, 
ul#menu li a {
    position:relative
}

除了IE之外的大多数浏览器应该没问题，为了支持负z-index和position：relative而有一点点麻烦 - 但由于它们没有很好的盒子阴影，你可以忽略它们。

替代：如果您不想为每个li使用z-index，您可能更喜欢inset box-shadow，

ul#menu li a { 
    box-shadow:inset 0px 6px 13px #777;
}

影子较弱，浏览器支持更窄（最新的现代浏览器），但编码更容易。

P.S。对于这个问题，添加CSS标签会有很大帮助。