今天学习的是完成二级导航效果的制作，需要引用js 小班用的是baidu公用的jquery效果如上图。
下面是html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>DIV+CSS二级导航实例</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $nav=$('.nav');
var menu_2=('.menu_2');
$nav.mousemove(function(){$(this).find(menu_2).slideDown(500)});
$nav.mouseleave(function(){$(this).find(menu_2).slideUp(500)});
})
</script>
<style type="text/css">
*{padding:0px;margin:0px;}
ul,li{list-style-type:none;}
body{font-size:14px;font-family:Arial, Helvetica, sans-serif;color:#000}
div{margin:50px auto;height:30px;}
.menu{height:30px;float:left;}
.nav{float:left;width:100px;height:30px;line-height:30px;text-align:center;position:relative;margin-left:1px;background:#CCC;}
.ys1{width:100%;height:30px;display:block;float:left;line-height:30px;text-align:center;text-decoration:none;color:#FFF;}
.nav:hover .ys1{background:#06F;}
.menu_2{width:100px;float:left;position:absolute;top:30px;left:0px;display:none;}
.nav_2{width:100px;float:left;height:20px;margin-top:1px;line-height:20px;color:#FFF;text-align:center;background:#09C;}
.ys2{width:100px;height:20px;display:inline;float:left;color:#FFF;text-decoration:none;}
.ys2:hover{background:#0CF;}
</style>
</head>
<body>
<div>
<ul class="menu">
<li class="nav"><a href="#" class="ys1">测试页面</a>
<ul class="menu_2">
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
</ul>
</li>
<li class="nav"><a href="#" class="ys1">测试页面</a>
<ul class="menu_2">
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
</ul>
</li>
<li class="nav"><a href="#" class="ys1">测试页面</a>
<ul class="menu_2">
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
</ul>
</li>
<li class="nav"><a href="#" class="ys1">测试页面</a>
<ul class="menu_2">
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
<li class="nav_2"><a href="#" class="ys2">测试二级</a></li>
</ul>
</li>
</ul></div>
</body>
</html>
辽公网安备:42900402000182号