需要帮助，使悬停时打开子菜单

问题描述：

我有一个菜单，我已经建立，目前正常工作，我想添加子菜单项时出现鼠标悬停在菜单项上。有谁知道如何做到这一点？需要帮助，使悬停时打开子菜单

<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>

你尝试过什么呢？（有用的链接提出更好的问题：[问]，[FAQ]） – Doorknob 2013-04-08 20:59:00

你是否搜索了任何东西？ “html5悬停菜单”提供了大约2,000,000次点击，这个看起来不错：http：//jacwright.github.io/simpli5/demos/hover-menu.html – regretoverflow 2013-04-08 21:01:02

答

你可以去这里和他们的示例教程学习。这很容易。只处理你悬停状态。

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

答

我通常是这样做的：

<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; 
}

需要帮助，使悬停时打开子菜单

相关推荐