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

Question

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

Answer 1

这是一个简单的代码

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

Answer 2

请试试这个，

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