代码思路:
导航栏里的里都要有鼠标经过效果,所以要循环注册鼠标事件
当鼠标经过li里面的第二个孩子ul显示时,当鼠标离开,则ul隐藏
效果如下:
HTML代码:
创建一个下拉菜单的框架
<ul class="nav">
<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>
<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>
</ul>
css代码:
设置下拉菜单的一些固定样式样式,比如把父亲的孩子隐藏,比如子绝父相
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #222222;
}
.nav {
width: 400px;
height: 200px;
margin: 40px auto;
}
.nav li {
position: relative;
float: left;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
}
.nav ul li a {
display: block;
text-align: center;
width: 60px;
height: 30px;
color: #f0f;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 31px;
left: 0;
width: 100%;
border-left: 1px solid #fecc5b;
border-right: 1px solid #fecc5b;
}
.nav ul li {
border-bottom: 1px solid #fecc5b;
}
.nav ul li a:hover {
background-color: #fff5da;
}
javascript部分代码:
//获取元素
var nav = document.querySelector(".nav");
var lis = nav.children; //得到3个亲儿子li
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
// lis的孩子ul
this.children[1].style.display='block'
}
lis[i].onmouseout=function(){
// lis的孩子ul
this.children[1].style.display='none'
}
}