纯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