效果图
结构
<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>
样式
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 600px;
height: 30px;
float: left;
background-color: #eee;
margin-left: 30px;
line-height: 20px;
}
.nav ul {
display: none;
margin: 0;
padding: 0;
}
.nav li {
float: left;
width: 70px;
font-size: 14px;
margin-top: 6px;
background-color: #eee;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li:hover {
background-color: pink;
}
JS
//1.获得元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到四个小li
console.log(lis);
//2.循环注册事件
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';
}
}