CSS下拉菜單的第二級無法正常工作

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