css - Accordion 菜单中的框阴影

Question

我有一个使用 jQuery 的简单 Accordion 菜单，但我在设置它的样式时遇到了问题，因此每个元素都会在每个后续元素上转换阴影。该菜单由一个无序列表组成，其中每个元素都是一个链接，单击该链接会触发向下/向上滑动以显示/隐藏一个部分。我想要的只是每个标题，橙色框，在它后面的那个上投下阴影，但似乎没有多少 z-indexing 可以克服列表设置的默认值(如果我删除列表背景或使阴影上升而不是向下我可以看到它们)。

Here you can see I've tried everything I can think of to make things order correctly .我已经按降序对列表元素和 anchor 进行了 z 索引，但仍然没有成功。任何人都知道如何让盒子阴影在这里正常工作？你可以看到影子看起来找到的最后一个元素，我想要在每个元素下面。

Answer 1

其实你很亲近...

原因:

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

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

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

对于除 IE 之外的大多数浏览器应该没问题，IE 在支持负 z-index 和 position: relative 方面有一些小麻烦 - 但由于它们没有漂亮的 box-shadow，您可以忽略它们。

替代方案:如果您不喜欢对每一行都使用 z-index，您可能更喜欢 inset box-shadow，

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

Shadow 较弱，浏览器支持范围更窄(最新的现代浏览器)，但编码更容易。

附注对于这个问题，添加一个 CSS 标签会有很大帮助。