代码如下
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#nav{ width:500px; margin:0px auto; list-style:none; font-size:12px; text-align:center; line-height:26px;}
#nav li{ width:100px; float:left;}
#nav li a{ display:block; width:99px; border-bottom:#FFFFFF 1px solid; text-decoration:none; background:#333333; height:26px; color:#CCCCCC;}
#nav li a:hover{ background:#CCCCCC; color:#333333;}
#nav li div{ display:none;}
</style>
<title>简单菜单测</title>
</head>
<body>
<ul id="nav">
<li>
<a href="#">江苏省</a>
<div class="child_menu">
<a href="#">南京</a>
<a href="#">苏州</a>
<a href="#">无锡</a>
<a href="#">常州</a>
<a href="#">镇江</a>
<a href="#">徐州</a>
</div>
</li>
<li>
<a href="#">浙江省</a>
<div class="child_menu">
<a href="#">杭州</a>
<a href="#">宁波</a>
</div>
</li>
<li>
<a href="#">福建省</a>
<div class="child_menu">
<a href="#">厦门</a>
<a href="#">福州</a>
<a href="#">泉州</a>
</div>
</li>
<li>
<a href="#">广东省</a>
<div class="child_menu">
<a href="#">广州</a>
<a href="#">深圳</a>
<a href="#">东莞</a>
<a href="#">潮州</a>
</div>
</li>
<li>
<a href="#">山东省</a>
<div class="child_menu">
<a href="#">青岛</a>
<a href="#">威海</a>
<a href="#">泰安</a>
<a href="#">济南</a>
<a href="#">德州</a>
</div>
</li>
</ul>
<script type="text/javascript教程" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var nav_main=$("#nav>li>a");
var nav_child=$("#nav>li>div");
nav_main.each(function(i){
$(this).mouseover(function(){
basic.show(i);
})
.mouseout(function(){
basic.hidden(i);
});
});
nav_child.each(function(i){
$(this).mouseover(function(){
basic.show(i);
})
.mouseout(function(){
basic.hidden(i);
});
});
var basic={
show:function(i){nav_child.eq(i).show();},
hidden:function(i){nav_child.eq(i).hide();}
}
</script>
</body>
</html>
