Jquery css div弹出二级菜单代码
jquery css教程 div弹出二级菜单代码
这是一款由jquery+css实现的二级菜单实例代码，你下载下去时只要去下载一个jquery.网页特效文件，就可以方便的使用这款漂亮的jquery的二级菜单代码了哦。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery.网页特效"></script>
<style type="text/css">
<!--
*{ margin:0; padding:0; border:0;}
body{ font-family: arial, 宋体, serif; font-size:12px;}
#nav{ width:180px; line-height: 24px; list-style-type: none;text-align:left;}
#nav span{ width:160px; display:block; padding-left:20px; cursor:pointer;}
#nav li{ background:#ccc; border-bottom:#fff 1px solid; float:left;}
#nav a:link, #nav a:visited{ color:#666; text-decoration:none;}
#nav a:hover{ color:#fff ;text-decoration:none; font-weight:bold;}
#nav li dl{ list-style:none; text-align:left; border-top:1px solid #fff;}
#nav li dl dd{ background:#ebebeb; border-bottom:#fff 1px solid;}
#nav li dl a{ padding-left:20px; width:160px; display:block;}
#parent{ width:300px; padding-left:20px;}
.dis{ display:none;}
.ondis{ display:block;}
.onhover{ background:#009900; color:#fff;}
.linkhover{ background:#cc0000; color:#fff;}
.active{ background:#00ccff; color:#666666;}
-->
</style>
<script type="text/网页特效">
<!--
$(function(){
$("#nav li").each(function(i){$(this).children("dl").addclass("dis");
$(this).children().click(function(){$(this).next().toggle(function(){$(this).addclass("ondis");});});
$(this).click(function(){$('#nav li').each(function(){$(this).find("span").removeclass();});$(this).find('span').addclass("onhover");});
});
})
$(function(){$("#nav dl dd").hover(function(){$(this).children().addclass("linkhover")},function(){$(this).children().removeclass("linkhover")});})
-->
</script>
<title>jquery弹出二级菜单</title>
</head>
<body>
<div id="parent">
<ul id="nav">
<li><span>frist nav1</span>
<dl>
<dd><a href="http://down.zzzyk.com">subnav1 menu1</a></dd>
<dd><a href="#">subnav1 menu2</a></dd>
<dd><a href="#">subnav1 menu3</a></dd>
<dd><a href="#">subnav1 menu4</a></dd>
</dl>
</li>
<li><span>frist nav2</span>
<dl>
<dd><a href="http://www.zzzyk.com">subnav2 menu1</a></dd>
<dd><a href="#">subnav2 menu2</a></dd>
<dd><a href="#">subnav2 menu3</a></dd>
<dd><a href="#">subnav2 menu4</a></dd>
</dl>
</li>
<li><span>frist nav3</span>
<dl>
<dd><a href="#">subnav3 menu1</a></dd>
<dd><a href="#">subnav3 menu2</a></dd>
<dd><a href="#">subnav3 menu3</a></dd>
<dd><a href="#">subnav3 menu4</a></dd>
</dl>
</li>
<li><span>frist nav4</span>
<dl>
<dd><a href="http://mb.zzzyk.com">subnav4 menu1</a></dd>
<dd><a href="#">subnav4 menu2</a></dd>
<dd><a href="#">subnav4 menu3</a></dd>
<dd><a href="#">subnav4 menu4</a></dd>
</dl>
</li>
</ul>
</div>
</body>
</html>
补充：网页制作,jquery
