0

可能重复：
导航栏中的html css下拉菜单

我有一个水平显示类别的现有菜单。当您将鼠标悬停在每个类别上时，如何使其下拉链接的垂直列表？就像传统的菜单行为。

这是我到目前为止所拥有的：http: //jsfiddle.net/chaddly/GrEWS/3/

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Sitemap</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

​</p> 

#nav li a:hover 
{
   background-color:#333333;
   padding-bottom:12px;
   border-bottom:2px;
   border-bottom-color:#f37022;
   border-bottom-style:solid;
   margin:-1px;
}
#nav li a 
{   
   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   background-color: #123261;
   color:#ffffff;
   border-bottom:1px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
}
#nav li 
{
    display:inline;
}
#nav
{
    padding:0;
}

这是一个例子

在此处输入图像描述

4

1 回答 1

1

尝试引导下拉菜单.. http://twitter.github.com/bootstrap/javascript.html#dropdowns

于 2012-12-12T04:34:16.050 回答