代码
<style>
li {
list-style: none;
}
.nav {
}
.nav li {
width: 200px;
float: left;
}
.nav ul {
display: none;
}
</style>
<body>
<ul class="nav" >
<li >第一个下拉框
<ul >
<li>第一个好的</li>
<li>第二个好的</li>
<li>第三个好的</li>
</ul>
</li>
<li ><a href="">第一个下拉框</a>
<ul >
<li>第一个好的</li>
<li>第二个好的</li>
<li>第三个好的</li>
</ul>
</li>
<li > <a>第一个下拉框</a>
<ul >
<li>第一个好的</li>
<li>第二个好的</li>
<li>第三个好的</li>
</ul>
</li>
</ul>
<script>
var nav = document.querySelector('.nav');
var lis = nav.children;
for(var i = 0 ; i< lis.length ; i++){
lis[i].onmouseover = function(){
this.children[1].style.display = 'block'
}
lis[i].onmouseout = function () {
this.children[1].style.display = 'none'
}
}
</script>