前端——JavaScript综合练习 下拉框样式实现（2）
上篇文章实现了点击版的下拉框样式，本文的下拉框为：当鼠标放在标题上时下拉框出现，收回时下拉框回收。
最终效果如下：
下拉框样式（2）（以河北大学研究生网站为例）
大致与点击版相同
以下为全部代码
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>
<link rel="stylesheet" href="下拉框样式.css">
<script>
window.onload=function(){
var first_li=document.querySelectorAll(".A>.b")
console.log(first_li)
for(var i=0;i<first_li.length;i++){
first_li[i].onmouseenter=function(){
if(this.querySelector(".sub")){
this.querySelector(".sub").style.display="block"
// 获取盒子高度
var second_li=this.querySelectorAll(".sub li")
var sum_height=0
for(var j=0;j<second_li.length;j++){
sum_height += second_li[j].clientHeight
}
this.querySelector(".sub").style.height= sum_height + "px"
}
}
first_li[i].onmouseleave=function(){
if(this.querySelector(".sub")){
this.querySelector(".sub").style.height="0px"
}
}
}
}
</script>
</head>
<body>
<!-- 下拉框 -->
<div class="a">
<ul class="A">
<li class="b">
<h3><a href="#">首页</a></h3>
</li>
<li class="b">
<h3><a href="#">机构简介</a></h3>
<ul class="sub">
<li><a href="#">部门概况</a></li>
<li><a href="#">机构职能</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</li>
<li class="b">
<h3><a href="#">招生工作</a></h3>
<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="b">
<h3><a href="#">培养工作</a></h3>
<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="b">
<h3><a href="#">学位管理</a></h3>
<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="b">
<h3><a href="#">学位点建设</a></h3>
<ul class="sub">
<li><a href="#">学位点评估</a></li>
<li><a href="#">学位点建设</a></li>
</ul>
</li>
<li class="b">
<h3><a href="#">专业学位</a></h3>
<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="b">
<h3><a href="#">导师管理</a></h3>
<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="b">
<h3><a href="#">学生工作</a></h3>
<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="b">
<h3><a href="#">文件汇编</a></h3>
</li>
<li class="b">
<h3><a href="#">下载专区</a></h3>
<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>
</ul>
</div>
</body>
</html>css
*{
padding: 0;
margin: 0;
transition: all 0.5s ease;
}
/* 下拉框开始 */
.a{
background: #ebebeb;
height: 50px;
}
.A{
display: flex;
width: 90%;
margin: 120px auto;
line-height: 50px;
/* background: rgb(123, 123, 231); */
padding: 0px 15px;
justify-content: space-between;
/* position: relative */
}
li{
list-style: none;
}
.b{
/* border: rgb(209, 159, 97) 2px solid; */
padding: 0px 25px;
position: relative
}
h3 a{
text-decoration: none;
color: black;
font-weight: 500;
align-items: center;
}
.b:hover{
background: #cccccc;
}
/* .sub{
background: rgba(0, 0, 0, 0.696);
position: absolute;
width: 170px;
top: 50px;
left: -18px;
display: none;
} */
.sub a{
display: block;
/* a标签 内联级元素 撑不起来 转为块级元素 */
margin: 0 auto;
text-align: center;
text-decoration: none;
color: white;
align-items: center;
line-height:40px;
font-size: 15px;
}
.sub li:hover{
background: rgba(255, 255, 255, 0.696);
color: rgba(0, 0, 0, 0.674);
}
.sub{
background: rgba(0, 0, 0, 0.684);
position: absolute;
height: 0px;
width: 170px;
top: 50px;
left: -18px;
/* display: none; */
overflow: hidden;
}