HTML下拉框代码

HTML下拉框代码
效果描述：当鼠标滑过一级导航的时候，对应的二级导航会展现出来，这就是我们经常说的下拉导航效果。

效果图如下：
详细代码如下：
Html部分：
<div class="nav">
<div class="logo"></div>
<ul class="navs">
<li>
网站首页
</li>
<li>
<span>关于我们</span>
<ul>
<li>人才理念</li>
<li>员工成长</li>
<li>员工风采</li>
<li>人才招聘</li>
</ul>
</li>
</ul>
</div>
Css样式部分：
.navs{width:910px;height:48px;float:left;margin-left:15px}
.navs li{width:110px;height:48px;float:left;text-align:center;
line-height:48px;cursor:pointer;text-align:center}
.navs li ul{width:110px;height:180px;overflow:hidden;display:none}
.navs li ul li{width:110px;height:40px;background:green;margin-top:1px; line-height:40px}
.navs li.on{background:green;color:#FFF}
.navs li ul li.in{background:#000}
Javascript部分：
<script type="text/javascript">
$(function(){
$(".navs li:has('ul')").mouseover(function(){
$(this).attr('class','on').siblings().removeClass('on');
$(this).children('ul').css({display:"block"})
})
$(".navs li:has('ul')").mouseout(function(){
$(this).children('ul').css({display:"none"})
})
$(".navs li ul li").mouseover(function(){
$(this).attr('class','in').siblings().removeClass('in');
})
$(".navs li ul li").mouseout(function(){
$(this).removeClass('in');
})
</script>
以上是实现这个下拉框效果的代码，图中的图片、文字等可以根据自己的实际情况做相应的调整。