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/