<style>
.clearfix::after {
display: block;
content: "";
clear: both;
}
ul,
li {
list-style: none;
}
.nav>li {
float: left;
margin: 0 10px;
}
.nav>li ul {
display: none;
}
</style>
</head>
<body>
<ul class="nav clearfix">
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
//案例分析：导航栏里面的li都要有鼠标经过效果 所以需要循环注册鼠标事件
//核心原理：当鼠标经过li里面的第二个孩子ul显示 当鼠标离开 ul隐藏
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>
