Z索引不适用于CSS3下拉导航

Question

我正在修改在教程中找到的css3导航，并且在使用z-indexing时遇到问题。

请在此处查看导航：

http://cafemeetup.com/testArea/nav/

如果将2个导航项中的任何一个进行滚动，则可以看到下拉框的z-indexing高于产生它的链接。 这是不正确的，因为我已将翻转框的z-index降低了堆叠顺序。

我想要实现的是使下拉框位于链接下方，因此下拉框的阴影在顶部不可见。 我希望将链接和下拉框合并为一个，我认为通过使链接位于下拉框的顶部，可以实现这一目标。

这是在Shopify上完成的：

http://www.shopify.com/ （滚动“资源”）

无论如何，希望有人能对此有所启发。 我假设问题出在我试图向其添加z-index的对象悬停并且它们本身不是常规div的事实。

无论如何，至少感谢您阅读所有这些内容。 詹姆斯，我很感谢你的时间

Answer 1

您将z-index:999应用于<li class="menu_right"> ，然后将z-index:1应用于<div class="dropdown_1column align_right">子元素。 如果希望它显示在<li>下方，请使其成为同级，而不是子级。

Answer 2

我在jsFiddle上为您做了一个演示。 尝试将背景和z-index样式移到.drop链接而不是代码中的列表项，它应该可以工作。

http://jsfiddle.net/sTsrb/