手风琴菜单中的阴影菜单

Question

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

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

Answer 1

其实你是如此接近......

原因：

1. 堆叠顺序覆盖阴影
2. 的z-index只与元素与工作等position比static

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

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

应该没关系除IE，其中有为了一些小麻烦，支持负的z-index和位置最浏览器：相对的 - 但因为他们没有漂亮的盒子阴影，你可能会忽略它们。

替代：如果你不喜欢使用的z-index为每李先生，你可能更喜欢inset箱阴影，

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

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

p.s.对于这个问题，添加一个CSS标签会有很大的帮助。