需要幫助，使懸停時打開子菜單

Question

我有一個菜單，我已經建立，目前正常工作，我想添加子菜單項時出現鼠標懸停在菜單項上。有誰知道如何做到這一點？

<div id="menu"> 
      <a href="#" >Home</a> 
      <a href="#">Submit New Record</a> 
      <a href="#">Sales by Salesperson</a> 
      <a href="#">Total Sales</a> 
      <a href="#" >Sales by Issue</a> 
      <a href="#" >Sales by Ad Size</a> 
      <a href="#" >Add New User</a> 
      <a href="#">Edit Record</a> 
      <a href="#">Logout</a> 
      </div></center> 
<style> 
#menu{ 
background-color:#3F9AD1; 
height:75px; 
width:1206px; 
} 

#menu a{ 
border-style:solid; 
border-width:2px; 
border-color:white; 
padding-top: 20px; 
float:left; 
display:block; 
width:130px; 
height:70px; 
text-decoration:none; 
color:white; 
text-align:center; 
font-family: Arial; 
/*box-shadow: 0 -7px 22px 6px #000000 inset;*/ 
} 

#menu a:hover{ 
    color:#3F9AD1; 
    background-color:white; 

#html { 
height: 100%; 
margin-bottom: 0.01em; 
overflow-y: scroll; 
} 

</style> 

Answer 1

你可以去這裏和他們的示例教程學習。這很容易。只處理你懸停狀態。

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Answer 2

我通常是這樣做的：

<ul class="menu"> 
    <li>Main Menu Item 
     <ul class="submenu"> 
      <li>Sub Menu Item</li> 
     </ul> 
    </li> 
</ul> 

然後CSS這樣的：

ul.submenu { 
    display: none; 
} 

li:hover ul.submenu { 
    display: block; 
}