Question

我下拉水平菜单，直到鼠标离开它才能正常工作。为了更好地解决问题，这里有一些屏幕截图：

当我将鼠标悬停在“菜单项3”上时：
当我离开ul（Chrome）时：
当我离开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中的subMenuItem隐藏起来。隐藏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();
    });
});

MouseLeave上的HTML / CSS菜单定位中的麻烦

1 个答案: