子菜單使用jQuery不工作，因爲它應該

Question

我的過程：

I'm使用jQuery的懸停效果，當我將鼠標懸停在列表項的鼠標我想找到一個子菜單，然後我用淡入淡出效果。

它就像，當我將鼠標懸停時，它會查找子項列表項，如果它顯示，它將隱藏，如果它隱藏它將顯示。

如果人們一遍又一遍地在菜單上快速傳遞，我使用停止方法來避免一些奇怪的效果。

我的問題：

我想我還以爲正確，但遺憾的是I'm有問題。

子菜單項出現在＃banner-container後面的其他元素後面，因此子菜單項不可見。

我曾嘗試玩過這些職位，但到目前爲止沒有成功，有誰知道如何解決這個問題？

我的jsfiddle在這裏你可以看到我的問題：

http://jsfiddle.net/jcak/9EcnL/6/

HTML：

<nav id="menu"> 
    <ul>  
     <li><a href="index.html">Home</a> 
      <ul> 
       <li><a href="#">Link 1</a></li> 
       <li><a href="#">Link 2</a></li> 
       <li><a href="#">Link 3</a></li> 
       <li><a href="#">Link 4</a></li> 
      </ul> 
     </li> 
     <li><a href="procuts.html">Procuts</a> 
      <ul> 
       <li><a href="#">Link 1</a></li> 
       <li><a href="#">Link 2</a></li> 
       <li><a href="#">Link 3</a></li> 
       <li><a href="#">Link 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contacts</a></li> 
    </ul> 
</nav> 

jQuery的：

$('li').hover(function(){ 
    $(this).find('ul>li').stop().fadeToggle(300); 
}); 

CSS：

#menu ul li ul li {display:none;} 

#menu-container 
{ 

    background:green; 
    width:100%; 
    height:46px; 
    float:left; 
    z-index:7; 
} 

#menu 
{ 
    width:960px; 
    height:auto; 
    margin:0 auto 0 auto; 
} 

#menu ul 
{ 
    list-style-type:none; 
} 

#menu ul li 
{ 
    float:left; 
    height:46px; 
    line-height:46px; 
    font-weight:300; 

} 

#menu ul li a 
{ 
    text-decoration:none; 
    color:#ccc; 
    display:block; 
    margin-right:5px; 
    height:46px; 
    line-height:46px; 
    padding:0 5px 0 5px; 
    font-size:20px; 

} 

#menu ul li a:hover 
{ 
    color:#fff; 
} 

Answer 1

你可能想是這樣的，對不對？

http://jsfiddle.net/9EcnL/3/

您的JavaScript是很好，你只是忘了在jQuery庫添加在的jsfiddle選項。我放入了一些CSS，以使子菜單顯示得更好一些。

#menu ul li 
{ 
    display: inline-block; 
    float:left; 
    height:46px; 
    position: relative; 
    line-height:46px; 
    font-weight:300; 

} 

#menu ul li a 
{ 
    text-decoration:none; 
    color:#ccc; 
    display:block; 
    margin-right:5px; 
    height:46px; 
    line-height:46px; 
    padding:0 5px 0 5px; 
    font-size:20px; 

} 

#menu ul li a:hover 
{ 
    color:#fff; 
} 
#menu ul li ul { 
    position: absolute; 
    left: 0; 
    -webkit-padding-start: 0; 
    width: 300px; 
} 
#menu ul li ul li 
{ 
    color:#fff; 
}