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

我不知道如何正确解释，但我在我的网站上有一个CSS菜单，并且它的第一层工作正常，当您将鼠标悬停在菜单项上时显示为下拉菜单。但是这些子列表并没有等待悬停。如果你去这里：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>

我修改代码的最后一个编程工作的，所以我不完全知道我”在做。我试图寻找解决这个问题的办法，但我一直在墙上跑。有谁知道修补程序是什么？

来源

2013-03-04 Andrew Whatever

添加>的li:hover

>后选择元素的唯一的第一个孩子（直接子）。您目前的代码是说要阻止（显示）鼠标上的所有ul。

Check this欲了解更多信息。

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

DEMO

来源

2013-03-04 07:05:26 Sowmya

其实我可能得太早发言。在Chrome和Firefox中一切运行良好，但在IE 9中，下拉菜单不再有效。它在每个菜单项下只有一个下拉菜单的情况下运行正常，但是第二级添加它就会死掉。 – 2013-03-04 09:44:43

@AndrewNee由于我无法根据浏览器兼容性编辑您的整个代码，我建议您阅读我的博客http://userinterfacehome.blogspot.in/2012/11/pure-css-dropdown- menu.html据此编辑你的代码 – Sowmya 2013-03-04 09:48:05

Sowmya谢谢你的链接，但是，博客帖子只包含带有每个父项的一个“子”菜单的菜单。我的问题与IE 9只是当我有另一个级别的菜单，例如，在我上面链接的页面是“主”作为父母，“测试”作为第一级孩子，“测试1”和“测试2”作为二级孩子。在第二级添加什么是打破IE 9. – 2013-03-04 09:55:33

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

回答

相关问题