纯CSS实现的下拉滑动菜单

页面文件的主要部分:可以是.html或者.jsp创建，都可以。
<div id=”navbar”>
<ul> /*主菜单1*/
<li><a>Products</a>
<ul> /*下拉菜单项*/
<li><a>Pagewhacker</a></li>
<li><a>InstaWeb</a></li>
<li><a>BookWriter</a></li>
</ul>
</li>
/*主菜单2*/
<li><a>Support</a>
<ul>
<li><a>Online</a></li>
<li><a>Contact</a></li>
<li><a>Others</a></li>
</ul>
</li>
</ul>
</div>
css控制文件：

@CHARSET “UTF-8″;

#navbar{
margin-left:200px;
}

#navbar ul{
margin:0;
padding:0;
list-style:none;
}

#navbar a{
display:block;
}

#navbar li{
float:left;
width:10em;
}

#navbar li ul{
display:none;
}

#navbar li:hover ul{
display:block;
width:10em;
position:absolut;
}

以上是下拉菜单的最小实现（粗糙原型），主要是设置了项元素的显示方式。

在以上基础上加入个人的美工实现就可以设计出更加美丽的下拉菜单了。

联系邮箱：wuyimin1228@163.com

~~~~      欢迎讨论      ~~~~