Question

我不知道如何正确解释这一点，但我的网站上有一个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>

我正在修改上一个程序员工作的代码，所以我不完全确定我在做什么。我试着查找这个问题的解决方案，但我一直在碰壁。有谁知道修复是什么？

Answer 1

在>

之后添加li:hover

>选择元素的唯一第一个子元素（直接子元素）。您当前的代码是说要在鼠标悬停时阻止（显示）所有ul。

Check this了解更多信息。

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

<强> DEMO

第二级CSS下拉菜单无法正常工作

1 个答案: