1

これを正しく説明する方法がわかりませんが、サイトに CSS メニューがあり、その最初のレイヤーは正常に機能します。メニュー項目にカーソルを合わせると、リストがドロップダウンとして表示されます。ただし、ホバーを待つ代わりにサブリストも表示されます。ここに行く場合：

http://www.negativeworld.org/test.php

「メイン」にカーソルを合わせると、意味がわかります。「テスト 1」と「テスト 2」は、「テスト」にカーソルを合わせたときにのみ表示されますが、「メイン」にカーソルを合わせるとすぐに表示されます。

これが私のCSSです：

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul {
    background-image: url(design/banner_menu_fd_excel.png);
    margin: 0;
    padding: 0;
    list-style: none;
    width: 140px;
}

ul li {
    position: relative;
    z-index:100;
}

li ul {
    position: absolute;
    left: 0px;
    width: 140;
    display: none;
}

ul ul  ul { position: absolute; left: 100%; top: -1; z-index:100; }

li:hover {
    visibility: visible; 
}

li:hover ul, li.over ul { 
    display: block;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #000000;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

ul a:hover {
    color: #FFFFFF;
    background:#8A8987;
}

.user_box_name a {
    color: #000000;
    text-decoration: none;
}
.user_box_name a:hover {
    color: #000000;
    text-decoration: underline;
}

そして、ここに私のメニューがあります：

<ul id="nav">
    <li>
        <a href="content.php" id="mainmenulink2" onMouseOver="bt_main.src=menu_main_on.src" onMouseOut="bt_main.src=menu_main_off.src" onFocus="this.blur()"><img src='design/menu/menu_main.png' name="bt_main" width="130" height="32" border='0' id="bt_main"></a>

        <ul>
            <li>
                <a href="test.php">test</a>

                    <ul>
                        <li><a href="test.php">test 1</a></li>
                        <li><a href="test.php">test 2</a></li>
                    </ul>

                    <li><a href="content.php?tp=recenthot" class="menulink">Hottest (Recent)</a></li>
                    <li><a href="content.php?tp=alltimehot" class="menulink">Hottest (All-Time)</a></li>
                    <li><a href="content.php?tp=news" class="menulink">News</a></li>
                    <li><a href="content.php?tp=review" class="menulink">Reviews</a></li>
                    <li><a href="content.php?tp=editorial" class="menulink">Editorials</a></li>
                    <li><a href="content.php?tp=podcast" class="menulink">Podcasts</a></li>
                    <li><a href="content.php?tp=roundtable" class="menulink">Roundtables</a></li>
                    <li><a href="content.php?tp=top ten" class="menulink">Top Ten Lists</a></li>
                    <li><a href="content.php?tp=comic" class="menulink">Webcomics</a></li>
                    <li><a href="content.php?tp=game" class="menulink2">Game Discussions</a></li>
                    <li><a href="content.php?tp=poll" class="menulink">Public Polls</a></li>
                    <li><a href="content.php?tp=etc" class="menulink">Etcetera</a></li>

                    <!--<li><a href="comicchoose.php">Comics</a></li>-->
                </ul>
            </li>
        </ul>

最後のプログラマーが取り組んだコードを変更しているので、自分が何をしているのか完全にはわかりません。この問題の解決策を調べてみましたが、壁にぶつかり続けました。誰が修正が何であるか知っていますか？

4

1 に答える 1

5

>の後に追加li:hover

>要素の唯一の最初の子 (直接の子) を選択します。あなたの現在のコードはul、マウスオーバーですべてブロック（表示）するように言っています。

詳細については、これを確認してください。

li:hover > ul, li.over > ul { 
    display: block;
}

デモ

于 2013-03-04T07:05:26.597 に答える