HTML下拉菜單導航不顯示

Question

我想學習HTML/CSS，並在課程期間我想創建一個基於CSS的下拉菜單導航欄。我閱讀了幾乎所有可以找到的教程，並最終構建了它，但問題在於它無法按預期工作，我獲得了主菜單，但列表沒有顯示出來。這裏是我的HTML結構：

<div id="Header"/> 
<div id="Navigation" > 
<ul id="Menu-H"> 

     <li id="HOME"><a href="#">HOME</a></li> 

     <li id="ITEMS"><a href="#">ITEMS</a></li> 
    <ul > 
     <li><a href="#">New Item</a></li> 
     <li><a href="#">Search Item</a></li> 
    </ul> 

     <li id="Category"><a href="#">CATALOG</a></li> 

     <li id="Inventory"><a href="#">INVENTORY</a></li> 

    </ul> 
<a class="LogOutButton" href="#">LOG OUT</a> 

，這裏是我建立的CSS：

#Menu-H {  
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
    margin-left: 50px;  
} 

#Menu-H li {  
    float:left; 
} 

#Menu-H li:hover {  
    background: #f4f4f4; 
    border-radius: 5px 5px 0px 0px; 
} 

#Menu-H li a { 

    //border-left: 2px solid blue; 
    //border-right: 2px solid blue; 
    //background-color: white; 
    display:block; 
    padding: 5px 15px 5px 15px; 
    text-decoration: none; 
    text-shadow: 1px 1px 1px #FFFFFF 
} 

#Menu-H li:hover a {  
    color: #161616; 
    text-shadow: 1px 1px 1px#FFFFFF; 
} 


/* Drop Down Menu.........*/ 

#Menu-H ul {  
    background: #161616; 
    background:rgba(255,255,255,0); 
    list-style: none; 
    display: none; 
} 

Menu-H ul li {  
    padding-top: 1px;; 
    float: none;  
} 

Menu-H li:hover ul {  
    display:block; 
} 

#Menu-H li:hover a {  
    background: #6b0c36;   
} 

#Menu-H li:hover ul li a:hover {  
    background: #333; 
} 

我找不到原因。

Answer 1

你的HTML豈不等於正確的，你需要給二次<ul>放置父<li>

<ul id="Menu-H"> 

     <li id="HOME"><a href="#">HOME</a></li> 
     <li id="ITEMS"><a href="#">ITEMS</a> 
      <ul> 
       <li><a href="#">New Item</a></li> 
       <li><a href="#">Search Item</a></li> 
      </ul> 
     </li> 

     <li id="Category"><a href="#">CATALOG</a></li> 
     <li id="Inventory"><a href="#">INVENTORY</a></li> 

</ul> 

你也忘了加上#在CSS兩個ID-S的內部。這是我做，你可以看到我做了一些改變，我說的是一個小提琴，它的工作原理：

http://jsfiddle.net/SJQ9B/