Question

我为我的网站创建了一个菜单。第一级是菜单很好，但问题是二级菜单。我已将第二级菜单从顶部稍微放下，所以当我开始向下移动鼠标时，菜单会崩溃。我希望在不将第二级菜单从当前位置移动的情况下填充该间隙。

这是demo。将鼠标移到“我的个人资料”链接上，然后慢慢地将鼠标移动到第二级菜单。结果是，由于父li和子ul之间的空间很小，菜单会折叠。我该如何解决这个错误？

JS：

$(document).ready(function () {
    $(".menu nav ul li").hover(function (e) {
        $(this).children("ul").slideDown();
    }, function (e) {
        $(this).children("ul").slideUp();
    });
});

HTML：

<header>
    <div class="welcome_area">
        <p>Welcome, <b><a href="profile.php">Arkam Gadet</a> </b>

        </p>
    </div>
    <div class="menu">
        <nav>
            <ul>
                <li><a href="profile.php">My Profile</a>

                    <ul>
                        <li><a href="#">My Questions</a>

                        </li>
                        <li style="margin-bottom: 5px;"><a href="#">Settings</a>

                        </li>
                    </ul>
                </li>
                <li><a href="inbox.php">Inbox</a>

                </li>
                <li><a href="#">Notifications</a>

                </li>
            </ul>
        </nav>
    </div>
</header>

CSS：

header {
    background-color: #eee;
    height: 45px;
    box-shadow: 0px 2px 3px 1px #bbb;
}
a {
    color: black;
    text-decoration: none;
}
h2 {
    color: #f79a1d;
}
.welcome_area {
    float: left;
    margin-left: 5%;
}
.menu {
    float: right;
    margin-right: 5%;
}
.menu nav > ul {
    position: relative;
    padding:0px;
}
.menu nav ul li {
    display: inline;
    padding: 5px;
}
.menu nav ul li a {
    padding: 2px;
}
.menu nav ul li a:hover {
    background: #eee;
    border: 0;
    border-radius: 3px;
    box-shadow: 0px 0px 2px 1px #000;
}
.menu nav > ul ul {
    position: absolute;
    left: -30px;
    top: 40px;
    padding:0px;
    width: 150px;
    border-radius: 3px;
    display: none;
    background-color: #eee;
    box-shadow: 0px 0px 2px 3px #bbb;
}
.menu nav > ul li > ul li {
    display: block;
}

Answer 1

将slideUp包裹在超时时间，如果你在它运行之前再次悬停，请将其清除：

$(document).ready(function () {
    var t;
    $(".menu nav ul li").hover(function (e) {
        if(t) clearTimeout(t);
        $(this).children("ul").slideDown();
    }, function (e) {
        var $this = $(this);
        t=setTimeout(function(){$this.children("ul").slideUp();},250);

    });
});

小提琴：http://jsfiddle.net/CfVyQ/2/

防止二级菜单崩溃

1 个答案: