Php 第二级CSS下拉菜单工作不正常

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

悬停在main上，你们会看到我的意思，测试1和测试2应该只在测试悬停在main上时出现，但当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>

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

在li:悬停之后添加>

>选择元素的唯一第一个子直接子元素。您当前的代码是阻止在鼠标上显示所有ul

了解更多信息

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

在li:悬停后添加>

>选择元素的唯一第一个子直接子元素。您当前的代码是阻止在鼠标上显示所有ul

了解更多信息

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

---

实际上我可能说得太快了。在Chrome和Firefox中，一切都很好，但在IE9中，下拉菜单将不再起作用。当每个菜单项下只有一个下拉菜单时，它工作得很好，但添加了第二级菜单后，它就消失了。@Andrewene由于我无法根据浏览器兼容性编辑您的全部代码，因此我建议您根据此“编辑您的代码”浏览我博客的本教程。谢谢您的链接，该博客文章只包含每个父项都有一个子菜单的菜单。我的IE9问题只有在菜单上有另一个级别时才会出现，例如，在我上面链接的页面中，main作为父级，test作为第一级子级，test1和test2作为第二级子级。加上第二个级别就是破坏IE9的原因。@Andrewene这个怎么样？现在我让IE9工作了，除了测试1和测试2在上面有一个间隙。我明天会查那个博客。不过我很快就能让它工作了！如果不需要的话，我不想重写所有的东西。事实上，我可能说得太快了。在Chrome和Firefox中，一切都很好，但在IE9中，下拉菜单将不再起作用。当每个菜单项下只有一个下拉菜单时，它工作得很好，但添加了第二级菜单后，它就消失了。@Andrewene由于我无法根据浏览器兼容性编辑您的全部代码，因此我建议您根据此“编辑您的代码”浏览我博客的本教程。谢谢您的链接，该博客文章只包含每个父项都有一个子菜单的菜单。我的IE9问题只有在菜单上有另一个级别时才会出现，例如，在我上面链接的页面中，main作为父级，test作为第一级子级，test1和test2作为第二级子级。加上第二个级别就是破坏IE9的原因。@Andrewene这个怎么样？现在我让IE9工作了，除了测试1和测试2在上面有一个间隙。我明天会查那个博客。不过我很快就能让它工作了！如果我不想重写的话，我不想重写所有的东西。