纯DIV+CSS实现简单导航条下拉效果，导航条说容易也不容易，可以用div+css来做 也可以用js来做，中间还要设计position的问题，这里就用纯div+css来写一个简单那的吧，用的是ul li标签来写的，完整代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简单下拉列表</title>
<style type="text/css">
*{margin:0;padding:0;}
a{ color:#fff; display:block; text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style:none;}
h1{font-size:24px; height:60px; line-height:60px;padding-left:20px;}
.nav{ height:30px; padding:0 20px; background-color:#666666; font-size:14px; overflow:hidden;}
.nav ul li{ float:left; width:80px; text-align:center; line-height:30px; margin-right:5px; }
.nav ul li:hover a{ background-color:#efefef; color:#000;}
.nav ul li:hover ul{z-index:999;position:absolute; width:255px;padding:5px 0 5px 5px; height:60px; border:1px solid #fff;background-color:#666;}
.nav ul li:hover ul a{color:#fff;background-color:#666666}
.nav ul li:hover ul a:hover{color:#666;background-color:#fff}
#banner{clear:both; overflow:hidden; height:361px; background:url(test.png) center center;}
</style>
</head>
<body>
<div style="height:60px; background-color:#ccc;">
<h1>DIV+CSS实现简单的导航条下拉</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li>
<a href="#">游戏</a>
<ul>
<li><a href="#">QQ游戏</a></li>
<li><a href="#">QQ游戏</a></li>
<li><a href="#">QQ游戏</a></li>
<li><a href="#">QQ游戏</a></li>
<li><a href="#">QQ游戏</a></li>
<li><a href="#">QQ游戏</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<div id="banner"></div>
</body>
</html>
1、主导航条中的li没有给position，
2、下拉菜单给ul一个position 并且没有给定left跟top