下拉菜单
ul 内放着若干 li ； li 内 分上下两块；上面是 a ; 下面是 ul ；ul 内有多个 li ，给li添加监听事件， 鼠标移入到 a 内时，ul 显示；鼠标再移入 ul 内时，ul 继续显示
结构
<body>
<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>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
</body>
jQuery方法
$(function () {
//结构：jQuery对象。行为（发生的事件）
//不需要用 for 循环，因为jQuery 内有隐式迭代
//鼠标经过
$(".nav > li").mouseover(function(){
// $(this) jQuery 当前元素; this 不要加引号
$(this).children("ul").show()
// $("ul>li>ul").show() 是所有，并非当前这一个；这就体现出选择函数的重要性
})
//鼠标离开
$(".nav > li").mouseout(function () {
this.children("ul").hide()
})
})
原生JS方法
<script>
const li = document.querySelectorAll('.nav > li')
for (i = 0;li.length;i++){
li[i].addEventListener('mouseover',function () {
//this在这里成了最顶级的
//认真学习如何选中下一级
this.querySelector('ul').style.display = 'block'
})
li[i].addEventListener('mouseout',function () {
this.querySelector('ul').style.display = 'none'
})
}
</script>