MouseLeaveでHTML/CSSメニューの配置に問題がある

Question

マウスを離すまでOKの水平メニューをドロップします。ここでは、より良い問題をilustrateするには、いくつかのスクリーンショットは、以下のとおりです。

1. ときI "メニュー項目3" の上にマウス：
2. ULのうち、私はマウス（クローム）：
3. 私はマウスUL（Firefoxの）のうち：

Iマウスが出て、私はここで、スクリーンショット1 上として滞在するメニューを必要とULから私の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以降では、異なる要素の：hoverがサポートされていますので、x-browserで動作させるには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(); 
    }); 
});