iquery+html+css实现下拉菜单

js的文件

<script type="text/javascript">
$(document).ready(function(){
$(".nav li .nav_sub").hide();
$(".nav li").mouseenter(function(){
$(this).find("*").show();
$(this).siblings().find(".nav_sub").hide();
});
$(".nav li").mouseleave(function(){
$(this).find(".nav_sub").hide();
$(this).siblings().find(".nav_sub").hide();
});
});
</script>

html文件的代码

<div class="cont_wrap">
<div class="cont_wrap">
<ul class="nav">
<li><a href="#">关于我们</a>
<ul class="nav_sub">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul class="nav_sub">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul class="nav_sub">
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
<li>公司简介</li>
</ul>
</li>
</ul>
</div>
</div>

css里的文件

.cont_wrap{
margin:10px auto;
width:940px;
height:400px;
background:#ccc;
padding-top:10px;
}
.nav{
margin-left:10px;
width:920px;
height:30px;
background:#fff;
border-bottom:1px solid #999;}
.nav >li{
float:left;

position:relative;}
.nav >li a{
padding:6px 24px;
display:block;}
.nav_sub{
box-shadow:0 0 2px rgba(51, 51, 51, 1) inset;
-webkit-box-shadow:0 -1px 2px rgba(0, 0, 0, 0.5) inset;
position:absolute;
top:31px;
left:0px;
display:block;
background:#fff;
padding-bottom:10px;
}
.nav_sub  li{
width:150px;
float:left;
text-indent:30px;
line-height:30px;
border-bottom:1px dashed #ccc;
font-size:12px;
}