下拉菜单（JQuery）
JQuery代码：
<script src="jquery.js"></script> \*在用JQurey，必须要引用JQuery库*\
<script type="text/javascript">
$(function(){
$(".nav").mousemove(function(){
$(this).children("ul").show();
})
$(".nav").mouseout(function(){
$(this).children("ul").hide();
})
})
</script>
CSS代码：
*{
margin:0;
padding:0;}
#nav{
background:#eee;
width:600px;
height:40px;
margin:0 auto; /*居中*/
}
ul{
list-style:none;
}
ul li{
float:left;
width:90px;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
color:#000;
display:block;
}
a:hover{
background:#0F6;
}
ul li ul li{
float:none;
background:#eee;
margin-top:2px;
}
ul li ul {
width:90px;
position:absolute;
left:0px;
top:40px;
display:none;
}
ul li ul li a:hover{
background:#063;
}
ul li ul li a{
display:block;
}
HTML代码：
<div id="nav">
<ul>
<li><a href="#">首页</a> </li>
<li class="nav"><a href="#">新闻</a> /*应该只能引用class，不能用id*/
<ul>
<li><a href="#">社会</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">财经</a></li>
</ul>
</li>
<li><a href="#">讲座</a>
<ul>
<li><a href="#">社会</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">财经</a></li>
</ul>
</li>
<li><a href="#">网页</a></li>
</ul>
</div>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
