1

ウェブサイト用に作成したメニューがあります。最初のレベルのメニューは問題ありませんが、問題は 2 番目のレベルのメニューにあります。2 番目のレベルのメニューを上から少し下に配置したので、マウスを下に移動し始めると、メニューが折りたたまれます。2 番目のレベルのメニューを現在の位置から移動せずに、そのギャップを埋めたいと思います。

ここにデモがあります。[マイ プロファイル] リンクの上にマウスを移動し、マウスをゆっくりと第 2 レベルのメニューに移動します。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;
}
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 に答える