jquery - メニューとサブメニューのホバー間のギャップ

Question

サブメニューのある水平メニューに取り組んでいます。メニューで jQuery を使用してドロップダウン機能を有効にしましたが、今のところ問題なく動作しています。

ただし、設計上の理由から、水平メニューと垂直サブメニューの間にはわずかな隙間があります。そのため、マウスをサブメニューに合わせると、ホバリングアウトし、サブメニューが論理的に消えます。

ただし、そのサブメニューを維持する必要があります。何か案は？

ご自分でチェックしてみてください @ [URL を削除しました。すでに提供されているソリューション]

よろしくお願いします。

score 3 · Accepted Answer

CSSで

変化する

#Menu ul ul {
    display: none;
    position: absolute;
    top: 40px;
}

に

#Menu ul ul {
        display: none;
        position: absolute;
        padding-top: 40px;
    }

score 2 · Accepted Answer

中間のギャップが設計上の選択であると想定して、hoverIntentプラグインを使用して、マウスがメニューを離れるとすぐにメニューが消えるように指示されないようにします。代わりに、ユーザーがメニューが消える前にメニューを離れることができる一定の余裕時間があります。

アニメーションキューの問題もあります。これを防ぐには、この手法を使用します。

score 0 · Accepted Answer

margin または padding を使用して css にギャップを追加できます。

とにかく、これはメニューを作成できる良いリンクです:

3 に答える 3