MouseLeave 上的 HTML/CSS 菜单定位问题

Question

我下拉水平菜单，直到鼠标离开它为止，它都可以正常工作。为了更好地说明问题，这里有一些屏幕截图：

1. 当我将鼠标悬停在“菜单项 3”上时：
2. 当我将鼠标移出 ul(Chrome) 时：
3. 当我将鼠标移出 ul(Firefox) 时：

当我将鼠标从 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 开始，才支持在不同元素上使用 :hover，因此如果您需要此功能，x 浏览器请勿使用 li:hover。

您可以使用该选择器来定义显示子菜单项时发生的情况，而不是在 CSS 中隐藏子菜单项。在 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();
    });
});