目的：
要实现的效果如上：
当点击上面的菜单选项时，要出现下拉框。
补充js知识
1. defer延迟加载（只针对外引）
<script src="js/JavaScript.js" defer></script>或者在body元素的最后外引，实现元素的加载
2. js延迟加载 等整个文档加载完执行 内嵌外引都可用
window.οnlοad=function(){ ...}
实现效果步骤：
1. 定好框架
2.根据框架写body部分
<body><div class="content"><ul class="main"><li class="aa"> <a href="#">首页</a></li><li class="aa"> <a href="#">机构简介</a><ul class="sub"><li><a href="#">部门概况</a></li><li><a href="#">机构职能</a></li><li><a href="#">联系方式</a></li></ul></li><li class="aa"><a href="#">招生工作</a><ul class="sub"><li><a href="#">硕士招生</a></li><li><a href="#">博士招生</a></li><li><a href="#">信息公开</a></li><li><a href="#">政策法规</a></li><li><a href="#">联系信息</a></li><li><a href="#">通知公告</a></li><li><a href="#">专业信息</a></li></ul></li><li class="aa"><a href="#">培养工作</a><ul class="sub"><li><a href="#">学籍管理</a></li><li><a href="#">教学管理</a></li><li><a href="#">培养方案</a></li><li><a href="#">课程建设</a></li></ul></li><li class="aa"><a href="#">学位管理</a><ul class="sub"><li><a href="#">学位管理</a></li><li><a href="#">学位委员会</a></li><li><a href="#">政策法规</a></li><li><a href="#">常置信息</a></li><li><a href="#">优博优硕</a></li></ul></li><li class="aa"><a href="#">学位点建设</a><ul class="sub"><li><a href="#">学位点评估</a></li><li><a href="#">学位点建设</a></li></ul></li><li class="aa"><a href="#">专业学位</a><ul class="sub"><li><a href="#">专业学位案例信息</a></li><li><a href="#">专业学位案例信息</a></li><li><a href="#">专业学位案例信息</a></li><li><a href="#">专业学位案例信息</a></li><li><a href="#">专业学位案例信息</a></li></ul></li><li class="aa"><a href="#">下载专区</a><ul class="sub"><li><a href="#">学位管理</a></li><li><a href="#">学位委员会</a></li><li><a href="#">政策法规</a></li><li><a href="#">常置信息</a></li><li><a href="#">优博优硕</a></li></ul></li></ul></div>
</body>写完之后的效果：
3.写css部分样式
首先，把浏览器适应的外边距等效果去掉。
*{padding: 0;margin: 0;}然后，a标签 li标签样式去掉
a{text-decoration: none;}li{list-style: none;}
....
.content{margin: 20px auto;background-color: rgb(168, 30, 30);}.main{width: 80%;margin: auto;display: flex;justify-content: space-between;}.main .aa{position: relative;}.main>li a{color: #fff;display: block;padding: 7px;}.main>li a:hover{color: rgb(168, 30, 30);background-color: #fff;}.main>li .sub{background-color: gray;position: absolute;/* display: none; */height: 0px;overflow: hidden;transform: translate(-40px);}.main>li .sub a{width: 140px;text-align: center;}.main>li .sub li:hover{background-color: rgb(192, 191, 191);}其中，用display:none;隐藏起来 然后，display:block;显现
4. 用js实现效果转换
1>鼠标离开下拉框立马消失。
window.onload=function(){var first_li=document.querySelectorAll(".main>li")console.log(first_li)for(var i=0;i<first_li.length;i++){first_li[i].onmouseenter=function(){if(this.querySelector("ul")){this.querySelector("ul").style.display="block"// this.querySelector("ul").style.height="150px"// 获取盒子的高度var second_li=this.querySelectorAll("ul li")var sum_height=0for(var j=0;j<second_li.length;j++){sum_height+= second_li[j].clientHeight// console.log(sum_height)}this.querySelector("ul").style.height=sum_height+"px"}}first_li[i].onmouseleave=function(){if(this.querySelector("ul")){this.querySelector("ul").style.height="0px"}} 
2>鼠标离开不立马消失（用setTimeout延时定时器）
window.onload=function(){var first_li=document.querySelectorAll(".main>li")console.log(first_li)for(var i=0;i<first_li.length;i++){first_li[i].onmouseenter=function(){if(this.querySelector("ul")){this.querySelector("ul").style.display="block"// this.querySelector("ul").style.height="150px"// 获取盒子的高度var second_li=this.querySelectorAll("ul li")var sum_height=0for(var j=0;j<second_li.length;j++){sum_height+= second_li[j].clientHeight// console.log(sum_height)}this.querySelector("ul").style.height=sum_height+"px"}}first_li[i].onmouseleave=function(){if(this.querySelector("ul")){this.querySelector("ul").style.display="none"// if()this.querySelector("ul").style.height="0px"setTimeout(function(){var second_ul=document.querySelectorAll(".main ul")for(var j=0;j<second_ul.length;j++){second_ul[j].style.display="none"}},1500)}// 延迟定时器// setTimeout}}
3>事件传播机制
现象：鼠标离开下拉框消失，但是标签下面空白处悬停下拉框还是会出现。
原因：
事件传播机制：元素之间存在嵌套关系， 绑定相同的事件，就会出现事件传输机制
捕获和冒泡只能二选一
阻止（停止）时间传播
child.onclick=function(e){alert("我是child")// 阻止（停止）时间传播e.stopPropagation()}不会传到父亲那里，触发谁执行谁
addEventListener(事件类型，事件函数，事件传播阶段 默认false 冒泡 true捕获 只把最上头的元素触发，不会向触点元素传播)
实现：
var first_li=document.querySelectorAll(".main>.aa")for(var i=0;i<first_li.length;i++){first_li[i].onclick=function(e){e.stopPropagation()// 先把所有的二级ul高度设为0pxvar second_ul=document.querySelectorAll(".sub")for(var i=0;i<second_ul.length;i++){second_ul[i].style.height="0px"}// 点击之后展示元素if (this.querySelector(".sub")){// 获取盒子的高度var second_li=this.querySelectorAll(".sub li")var sum_height=0for(var j=0;j<second_li.length;j++){sum_height+= second_li[j].clientHeight// console.log(sum_height)}this.querySelector(".sub").style.height=sum_height+"px"}}}// 点击页面任意处事件document.onclick=function(){// 先把所有的二级ul高度设为0pxvar second_ul=document.querySelectorAll(".sub")for(var i=0;i<second_ul.length;i++){second_ul[i].style.height="0px"}}
