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>中分离出来，并将其完全放置。