MouseLeave上的HTML/CSS菜單定位出現問題

Question

我下拉菜單水平，這工作正常，直到我的鼠標離開它。爲了更好地ilustrate這裏的問題是一些截屏：

1. 當我鼠標移到「菜單項3」：
2. 當我鼠標了UL的（鉻）：
3. 當我鼠標出了UL（火狐）的：

當我鼠標移出從UL我需要菜單留作爲截圖1 這裏是我的HTML：

<div style="position: relative">     
    <nav> 
     <ul id="main-menu"> 
      <li>@Html.ActionLink("Menu item 1", "Index", "InternalHome")</li> 
      <li>@Html.ActionLink("Menu item 2", "Index", "TeachingMaterials") 
       <ul> 
        <li>@Html.ActionLink("Menu item 2.1", "Index", "TeachingMaterials")</li> 
       </ul> 
      </li> 
      <li>@Html.ActionLink("Menu item 3", "Index", "TeachingMaterials") 
       <ul> 
        <li>@Html.ActionLink("Menu item 3.1", "Index", "TeachingMaterials")</li> 
        <li>@Html.ActionLink("Menu item 3.2", "Index", "TeachingMaterials")</li> 
        <li>@Html.ActionLink("Menu item 3.3", "Index", "TeachingMaterials")</li> 
       </ul> 
      </li> 
      <li>@Html.ActionLink("Menu item 4", "Index", "TeachingMaterials") 
      <li>@Html.ActionLink("Menu item 5", "Index", "TeachingMaterials") 
     </ul> 

    </nav> 
</div> 

CSS：

#main-menu * 
{ 
    margin: 0; 
    padding: 0; 
} 

#main-menu 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin-left: 100px; 
} 

#main-menu li 
{ 
    list-style: none; 
    float: left; 
} 
#main-menu li a 
{ 
    margin-right: 5px; 
    padding: 2px; 
    display: block; 
} 

#main-menu li ul li a 
{ 
    display: block; 
    width: 100%; 
} 

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

#main-menu li:hover ul 
{ 
    position: absolute; 
    display: inline; 
    left: 0; 
    width: 100%; 
} 

#main-menu li:hover li 
{ 
    float: left; 
} 

和簡單JS以顯示子菜單：

$(document).ready(function() { 
var menuLinks = $("#main-menu li"); 

menuLinks.hover(function() { 
    $("#main-menu li ul").hide(); 
    var menuLinkChildren = $(">ul", $(this)); 
    if (menuLinkChildren.length > 0) { 
     menuLinkChildren.show(); 
    } 
    return false; 
}, null); 

}）;

Answer 1

問題是你在結合CSS懸停和jQuery的懸停。不幸的是，CSS在現代瀏覽器中贏得了這場戰鬥。只有自CSS3以來：支持懸停在不同的元素，所以如果你需要這個工作x-瀏覽器不使用li：hover。

不用在CSS中隱藏subMenuItems，你可以使用該選擇器來定義它們顯示時發生的情況。隱藏jquery onload中的子菜單。

唯一要做的事情就是顯示子菜單並隱藏來自兄弟的子菜單。

例如：http://jsfiddle.net/tive/YzwPa/

CSS

#main-menu * 
{ 
    margin: 0; 
    padding: 0; 
} 

#main-menu 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin-left: 100px; 
} 

#main-menu li 
{ 
    list-style: none; 
    float: left; 
} 
#main-menu li a 
{ 
    margin-right: 5px; 
    padding: 2px; 
    display: block; 
} 

#main-menu li ul li a 
{ 
    display: block; 
    width: 100%; 
} 

#main-menu li ul 
{ 
    position: absolute; 
    display: inline-block; 
    left: 0; 
    width: 100%; 
} 

#main-menu li ul li 
{ 
    float: left; 
} 

JS

$(function() { 
    var menuLinks = $("#main-menu li"); 
    menuLinks.find("ul").hide(); 
    menuLinks.hover(function() { 
     $(this).siblings().find("ul").hide(); 
     $(this).find("ul").show(); 
    }); 
});