z-index問題與jQuery .show（）

Question

我有一個jQuery的.show（）函數瘋狂的問題。

我在我的網頁上有一個導航欄。當您將鼠標懸停在導航欄的最後一個元素上方時，會在其下方彈出一個subnav菜單。該部分奇妙地起作用。

jQuery的代碼如下所示：

$('#navbar li.etc').hover(
    function() { 
     $('#subnav').show(); 
     $('li.etc a.main').addClass('hover'); 
    }, 
    function() { 
     $('#subnav').hide(); 
     $('li.etc a.main').removeClass('hover'); 
    } 
); 

的HTML代碼如下所示：

<ul id="navbar"> 
    <li><a href="#">home</a></li> 
    <li><a href="#">about us</a></li> 
    <li><a href="#">developers</a></li> 
    <li><a href="#">pricing</a></li> 
    <li class="etc"><a class="main" href="#">etc &raquo;</a> 
    <ul id="subnav"> 
     <li><a href="#">api</a></li> 
     <li><a href="#">contact</a></li> 
     <li><a href="#">careers</a></li> 
     <li><a href="#">twitter</a></li> 
    </ul> 
    </li> 
</ul> 

而CSS是這樣的：

#navbar { 
    position: absolute; 
    height: 30px; 
    /*width: 455px;*/ 
    right: 85px; 
    bottom: 40px; 
} 

#navbar li { 
    float: left; 
    list-style: none; 
    padding: 2px 5px 12px 5px; 
    margin-right: 5px; 
    border-radius: 5px; 
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
    -moz-border-radius: 5px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    border: 1px solid #50A6C8; 
} 

    #navbar li.etc:hover { 
     background: #9DD3E7; 
     color: #203C4D; 
     border: 1px solid gray; 
    } 

     #navbar li a { 
      margin: 0px auto 0px auto; 
      list-style: none; 
      /*color: #325E77;*/ 
      color: white; 
      font: 1.8em "Helvetica", "Lucida Grande", Serif; 
      text-decoration: none; 
     } 

     #navbar li a:hover { 
      color: #203C4D; 

     } 

     #navbar li a.hover { 
      color: #203C4D; 
     } 

#subnav { 
    display: none; 
    position: absolute; 
    right: 5px; 
    top: 35px; 
    width: 340px; 
    border-radius: 5px; 
    border-top-right-radius: 0px; 
    -moz-border-radius: 5px; 
    -moz-border-radius-topright: 0px; 
    padding: 13px 13px 5px 13px; 
    font: .9em "Helvetica", "Lucida Grande", Serif; 
    background: #9DD3E7; 
    z-index: 1; 
    box-shadow: 5px 5px #888; 
    -moz-box-shadow: 5px 5px #888; 
    -webkit-box-shadow: 5px 5px 5px #888; 
    border: 1px solid gray; 
} 

#subnav li { 
    float: left; 
    list-style: none; 
    margin: 0px auto 0px auto; 
    border: none; 
} 

    #subnav li a { 
     padding: 2px 8px 2px 8px; 
     text-decoration: none; 
     color: #325E77; 
    } 

    #subnav li a:hover { 
      color: #203C4D; 
    } 

我有邊界和Z指數的問題。我在subnav div上有一個邊框，在navbar元素的頂部和邊上有一個邊框。我想要發生的事情是，使用.show（）彈出subnav，並讓它出現在navbar元素的下方（我的頁面中的「etc」），以便它看起來像一個單一的無縫部分。但現在，subnav在最後一個導航欄元素的上方彈出，所以顯示邊框。這是一個在線的例子：

[鏈接刪除]

我打了一堆每個元素的z索引屬性，但我似乎無法得到它的權利。我發現了一些處理涉及z-index和IE的問題的資源，但是我的問題存在於webkit和mozilla瀏覽器中。所以這些資源並沒有太多幫助我。

有沒有人有建議？我正在把我的頭髮撕掉！謝謝！

Answer 1

您的問題正在發生，因爲subnav是listitem etc的子元素。因此無論您如何使用z索引，它永遠都不會「低於」它。

你可以嘗試做什麼，將它從<li>中分離出來，並將其完全放置。