子菜單純CSS和HTML消失

Question

我有一個菜單，它有一個子菜單。當我將鼠標懸停在主菜單上時，出現子菜單，但只要我嘗試下去子菜單，大多數情況下都會消失。只有當我速度很快時，我才能在它消失之前得到它。

HTML：

<header> 
<div class="wrapper"> 
     <a href="#" id="logo" class="fl"><img src="images/logo.png" width="125" height="20" alt=""></a> 
     <nav class="fl"> 
      <ul > 
       <li> <a href="#" class="selected">Target Groups</a> 
       <ul> 
        <li><a href="">Manage Target Groups</a></li> 
        <li><a href="">Create Target Group</a></li> 
       </ul> 
       </li> 
       <li><a href="#">Activity</a></li> 
       <li><a href="#">Reports</a></li> 
       <li><a href="#">Settings</a></li> 
       <li><a href="#">Admin</a></li> 
      </ul> 
     </nav> 
      </div> 
      <!-- end .wrapper --> 
    </header> 

CSS：

header{ 
margin-top: 30px; 
background: url(../images/header-bg.png) no-repeat; 
width: 942px; 
height: 76px; 
padding: 27px 25px 5px; 
} 
header .wrapper{ 
    border-bottom: 1px solid #e5e5e5; 
    float:left; 
    width: 862px; 
    padding: 0 40px 5px;   
    position:relative; 
} 
header nav{ 
    margin-left: 45px;   
} 
header nav ul{ 
    z-index: 100; 
} 
header nav ul li{ 
    display: inline;  
    margin-right: 35px; 
    line-height: 20px; 
    z-index: 100; 
} 
header nav ul li ul{ 
    display: none; 
    position:absolute;  
    width: 962px; 
    left: 0; 
    top: 40px; 
} 

header nav ul li ul li{ 
    float: left;  
} 

header nav ul li:hover ul{ 
    display:block; 
} 
header nav ul li a{ 
    font-size:16px; 
    color: #5b666a; 
    text-decoration: none; 
    padding: 5px 10px; 
} 
header nav ul li a.selected,header nav ul li a:hover{ 
    background: #657073; 
    color: white; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

我真的卡住了，請幫助...

Answer 1

爲了達到你想要什麼，最好使用padding-top對於您的子菜單，而不是絕對定位（對於後者，菜單和子菜單之間會出現「空白」空間，導致鼠標移出）：

http://jsfiddle.net/BAzx7/

編輯：我添加position:relative;到ul li，和較低的z-index到ul li ul，否則子菜單將在主菜單 - 和禁用它...

http://jsfiddle.net/BAzx7/1/

Answer 2

我我也在下拉菜單中用hoverIntent解決了這個問題。當時是一個獨家IE錯誤，但是很容易修復。

http://cherne.net/brian/resources/jquery.hoverIntent.html

這是我的職責是什麼樣子。

$('.main-nav > ul > li').hoverIntent({ 
     timeout: 300, 
     over: function() { 
      $(this).addClass('hover') 
     }, 
     timeout: 300, 
     out: function() { 
      $(this).removeClass('hover') 
     } 
    }); 

我的標記與吸盤魚菜單的兒子結構相同。