1

我不知道如何正确解释这一点，但我的网站上有一个 CSS 菜单，它的第一层工作正常，当您将鼠标悬停在菜单项上时，列表显示为下拉菜单。但是子列表也会出现，而不是等待悬停。如果你去这里：

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

并将鼠标悬停在“main”上你会明白我的意思，“test 1”和“test 2”应该只在“test”悬停时出现，但当“main”悬停时它们会立即出现。

这是我的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 回答