◆浏览效果
◆HTML原代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉式导航栏</title>
<style type="text/css">
*{margin:0px;
padding:0px}
#b1{width:100%;
height:50px;
background:#0CF;
text-align:center;
padding-left:200px;
}
a{text-decoration:none;}
.nav{list-style:none}
.nav li{list-style:none;
width:180px;
line-height:50px;
float:left;}
.nav li ul{
position:relative;
display:none;}
.nav li ul li{width:180px;
background:#0CF;}
.nav li a{display:block;
width:180px;
line-height:50px}
.nav li a:hover{background:#36C; color:#CF3;}
.nav li:hover ul{display:block;}
</style>
</head>
<body>
<div id="b1">
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品说明</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul></li>
<li><a href="#">最新动态</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul></li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul></li>
<li><a href="#">广纳英才</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
