下拉菜单最终效果如图：
实现原理，通过绝对定位的方式，使下拉列表脱离文档流。通过js或者css来控制鼠标移入后的效果
初始时可以改变
1.display：none;使其隐藏
2.height：0px;改变高度使其隐藏
–>加上下面代码可以实现菜单的上升下拉逐渐出现动画效果
transition: height 2s ease;
3.opacity：0；改变透明度使其隐藏
–>加上下面代码可以实现菜单的渐隐渐显动画效果
transition: opacity 2s ease;
等等。。。
以下步骤可以实现二级菜单上升下拉逐渐出现的动画效果，上面其他两种方式可自行尝试
第一步 写html文档，构建页面的骨架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入css -->
<link rel="stylesheet" href="index.css">
<!-- 引入js -->
<script src="index.js" defer></script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">中心简介</a></li>
<li><a href="#">工作动态</a></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></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></li>
<li><a href="#">资源管理</a></li>
<li><a href="#">文案探讨</a></li>
</ul>
</div>
</body>
</html>
运行结果如图：（引入JavaScript时加入defer，使其在html文档加载完成后，在加载js代码，因为代码自上而下执行，避免先加载js，在js中获取不到html元素的信息）
第二步 写css样式，文件名（index.css）css来控制样式，使html变成大漂亮
代码主要实现：
1、清除li标签点的样式
2、横向布局，具体效果自定
3、使二级菜单绝对定位，相对于其父级元素
4、隐藏二级菜单，通过在文章开始说的三种基本方式。（以下是高度改变）
css代码：
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.nav{
width: 80%;
margin: 0 auto;
background-color: red;
}
.nav>ul{
display: flex;
justify-content: space-between;
}
.nav>ul>li{
width: 10%;
text-align: center;
position: relative;
}
.nav ul li{
height: 43px;
box-sizing: border-box;
}
.nav ul li a{
text-decoration:none;
color: aliceblue;
/* 所有的a继承父级的宽度 */
display: block;
padding: 10px 0;
}
.nav ul li a:hover{
background-color: aqua;
border-bottom: 4px solid blueviolet;
}
.nav>ul>li>ul{
/* 动画效果，当高度改变时，使其2s渐变 */
transition: height 2s ease;
background-color: red;
width: 100%;
height: 0;
overflow: hidden;
position: absolute;
top:40px;
}
运行结果：可以看的非常漂亮（大红色）十分显眼
上述css中最关键的是：给二级菜单绝对定位，给他父级相对定位，并且height: 0;overflow: hidden;使其初始的时候隐藏(overflow必须加)
.nav>ul>li{
position: relative;
}
.nav>ul>li>ul{
height: 0;
overflow: hidden;
position: absolute;
top:40px;
}
如果只使用css来完成下拉菜单，可以通过加hover的形式，使其要变的二级菜单，通过hover的形式，改变height: 132px;的形式也可以
第三步写JavaScript文件(index.js),是上面下拉菜单有动态效果
代码主要实现：
1、在js里获取到一级菜单
2、写一个for循环，给每个一级菜单加上移入移出动作
3、判断当前移入的目标，改变高度显示二级菜单，移出时，高度重新为0，使其消失
代码如下：
var firstLi = document.querySelectorAll(".nav>ul>li");
// 通过循环给每个一级li标签都绑定鼠标移入事件
for(var i=0;i<firstLi.length;i++){
firstLi[i].onmouseover=function(){
if(this.querySelector("ul")){
// firstLi[i]已经不是当前的了，this是当前的
var secUL=this.querySelector("ul");
// 获得当前二级菜单中的li标签个数
var liLength=secUL.querySelectorAll('li').length;
secUL.style.height=44*liLength+'px';
}
}
firstLi[i].onmouseout=function(){
if(this.querySelector("ul")){
// firstLi[i]已经不是当前的了，this是当前的
var secUL=this.querySelector("ul");
secUL.style.height='0px';
}
}
}
根据二级菜单个数，来改变高度，增加代码健壮性，想加多个二级菜单时，不需要在修改js
最开始其他两种方式也可以通过这种形式实现：只需要修改一点点代码，就可以
笔者审美太低，样式太丑可以自行修改。