4

しばらくの間、コードの修正を探していました。

静的オブジェクトにカーソルを合わせた後にメニューの内容を表示するドロップダウン メニューがありますが、アイテムの 1 つを選択しようとすると (マウスを静的オブジェクトから離すと)、アイテムが消えます (元に戻されます)。表示：なし）

私のコードは次のとおりです。

HTML:

<div id="menuContainer">
    <div class="menuItem first">
        <div class="settingsIcon"></div>
        <div class="text">Account Settings</div>
        <div class="downArrowIcon"></div>
    </div>
    <div id="settingsMenu">
        <div class="menuItem">Manage clients</div>
        <div class="menuItem">Manage specials</div>
        <div class="menuItem">Manage users</div>
        <div class="menuItem">Logout</div>
    </div>
</div>';

CSS:

div#menuContainer div:hover + div#settingsMenu{
    display: block;
    position: relative;
    z-index: 100;
}

div#menuContainer div#settingsMenu{
    display: none;
    width: 100%;
}

どんな助けでも大歓迎です。

4

5 に答える 5

2

display:none;セクションがホバー セクションの上にあることを確認する必要があります(トップダウンで読み取られるため、適切な優先度が必要です) だけでなくdisplay:block;、settingsMenu 自体にカーソルを合わせるときにも必要です。

コード：

#settingsMenu{
    display: none;
    width: 100%;
}

#menuContainer div:hover + #settingsMenu,#settingsMenu:hover{
    display: block;
    position: relative;
    z-index: 100;
}

表示する jsFiddle を次に示します。

于 2013-02-13T21:11:37.090 に答える
1

div の代わりにリストを使用してこれを行うこともできます。これはよりクリーンで、サブメニュー用に簡単に拡張できます。以下にサンプルを示します。

<html>
    <head>
        <style type="text/css">
            nav ul ul {
                display: none;
            }

            nav ul li:hover > ul {
                display: block;
            }
            ul {
                list-style: none;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <div class="settingsIcon"></div>
                    <div class="text">Account Settings</div>
                    <div class="downArrowIcon"></div>
                    <ul>
                        <li>Manage clients</li>
                        <li>Manage specials</li>
                        <li>Manage users</li>
                        <li>Logout</li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>
于 2013-02-13T21:31:39.743 に答える
0

あなたがしなければならないのは、内部div:menuContainerのsではなく：hover状態をにアタッチすることです。divまた、あなたは必要ありません+

以下が機能するはずです。

#menuContainer:hover div#settingsMenu{
    display: block;
    position: relative;
    z-index: 100;
}

編集：以下は上記を説明するCodePedです：

http://codepen.io/braican/pen/yIjLs

于 2013-02-13T21:19:29.620 に答える
0

追加してみましたか:

div#settingsMenu:hover{display: block;}

テストしていませんが、うまくいくようです。

于 2013-02-13T21:08:48.467 に答える
0

時々（私には数回起こりました）問題は優先順位ではなく、CSSのレイヤーにあります。 z-indexは、CSS に別の次元を与えるプロパティです。

私の例では、スライダーの z-index がドロップダウンを台無しにしていました。

.submenu {
    ...
    z-index: 99999;
}

問題を修正します。

(.submenuは<ul>ドロップダウンリストです)

于 2018-09-14T11:47:28.877 に答える