如何在鼠標懸停上顯示菜單項？

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