如何在鼠标悬停上显示菜单项？

Question

我有一个底部导航栏。我只想显示悬停在每个导航按钮上的菜单项。这有可能与bootstrap有关吗？

Answer 1

请试试这个，

<div class="mainmenu">   
<ul>    
    <li><a href="#">Home</a></li> 
    <li class="submenu"><a href="#">About us</a> 
     <ul> 
      <li><a href="#">Our Team</a></li> 
      <li><a href="#">Skills</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Contact Us</a></li>     
</ul> 
</div>​ 

风格：

.submenu ul { 
    display: none; 
    list-style-type: none; 
    top: 0px; 
}​ 
.submenu:hover ul { 
    display: block; 
} 

Answer 2

下面是一个简单的代码

HTML

<div class="mainmenu">   
<ul>    
    <li><a href="home.html">HOME</a></li> 
    <li class="submenu"><a>ABOUT US</a> 
     <ul> 
      <li><a>SOFTWARE TEAM</a></li> 
      <li><a>EPUB TEAM</a></li> 
     </ul> 
    </li> 
    <li><a>CAREERS</a></li> 
    <li><a>CONTACT US</a></li>     
</ul> 
</div>​ 

CSS

.submenu:hover ul { 
    display: block; 
} 
.submenu ul { 
    top: 40px; 
    display: none; 
    list-style-type: none; 
}​