1

我为我的网站创建了一个菜单。第一级菜单很好，但问题在于第二级菜单。我已经将二级菜单从顶部稍微向下放置，所以当我开始向下移动鼠标时，菜单会折叠起来。我希望在不从当前位置移动二级菜单的情况下填补这个空白。

这是一个演示。将鼠标移到“我的个人资料”链接上，然后慢慢将鼠标向下移动到二级菜单。li结果是由于 parent和 child之间的空间很小，菜单被折叠了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;
}
4

1 回答 1

2

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/

于 2013-07-20T22:22:13.670 回答