方法一：
1.使用display: none(隐藏)、block(显示);方法,比较常见的一种二级导航栏，如下
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二级导航栏</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav1 {
width: 650px;
height: 40px;
margin: 200px auto;
}
.nav1>li {
float: left;
}
.nav1>li>a {
display: block;
width: 130px;
height: 40px;
text-align: center;
color: #fff;
font: 16px/40px "微软雅黑";
background-color: #0476bd;
}
.nav2>li>a {
display: block;
width: 130px;
height: 40px;
text-align: center;
color: #fff;
font: 16px/40px "微软雅黑";
background-color: #0476bd;
}
.nav1>li:hover a {
background: #07629a;
}
.nav2 {
display: none;
}
.nav1>li:hover .nav2 {
display: block;
}
.nav2>li>a:hover {
background: #0476bd;
}
</style>
</head>
<body>
<ul class="nav1">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">学校概况</a>
<ul class="nav2">
<li><a href="#">学校简介</a></li>
<li><a href="#">现任领导</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">学校风景</a></li>
</ul>
</li>
<li>
<a href="#">管理机构</a>
<ul class="nav2">
<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>
<li><a href="#">现任领导</a></li>
</ul>
</li>
<li>
<a href="#">教学机构</a>
<ul class="nav2">
<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>
<a href="#">招生就业</a>
<ul class="nav2">
<li><a href="#">学校简介</a></li>
<li><a href="#">现任领导</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">学校风景</a></li>
</ul>
</li>
</ul>
</body>
</html>
效果图：
方法二：
1.使用transform: scale(0)/none来隐藏，配合opacity: 0/1;好看一些，代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 100%;
height: 61px;
background-color: #fff;
border: 1px solid #dddddd;
}
.w{
width: 1200px;
height: 100%;
margin: auto;
}
.nav>.w>ul{
display:flex;
align-items: center;
}
.nav>.w>ul>li{
float: left;
list-style: none;
position: relative;
height: 61px;
line-height: 61px;
}
.nav>.w>ul>li>a{
text-decoration: none;
color: #333333;
font-size: 14px;
padding: 20px;
position: relative;
}
.nav>.w>ul>li>a:hover{
color: #4581fb;
}
.nav>.w>ul>li>a::before{
content: '';
display: block;
width: 40%;
height: 2px;
background: #4581fb;
position: absolute;
bottom: 10px;
left: calc(50% - 20%);
display: none;
}
.nav>.w>ul>li:hover a::before{
display: block;
}
.children{
position: absolute;
background: #fff;
border: 1px solid #dddddd;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding:10px 0;
width: 150%;
transform-origin: top center;
transform: scale(0);
transition: all .3s;
opacity: 0;
}
.nav>.w>ul>li:hover .children{
transform: none;
opacity: 1;
}
.children>li>a{
color: #333333;
text-decoration: none;
font-size: 14px;
display: block;
padding: 10px 20px;
}
.children>li>a:hover{
color: #4581fb;
}
.children>li{
list-style: none;
line-height: 20px;
}
</style>
</head>
<body>
<div class="nav">
<div class="w">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">平台优势</a>
<ul class="children">
<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>
<a href="#">广告类型</a>
<ul class="children">
<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>
<a href="#">公司新闻</a>
<ul class="children">
<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>
<a href="#">了解更多</a>
<ul class="children">
<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>
</div>
</body>
</html>
效果图：
