下拉菜单（JQuery）

标签：style   io   color   ar   os   sp   java   div   on   

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>

下拉菜单（JQuery）

标签：style   io   color   ar   os   sp   java   div   on   

原文地址：http://www.cnblogs.com/yunian/p/4101322.html