简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果

页面样式如下：

html：

<li>
	<div class="nav-tab">技术分析</div>
	<ul class="nav-menu">
		<li>音视频</li>
		<li>语言</li>
		<li>Firebase</li>
		<li>Google AAB</li>
		<li>百度</li>
	</ul>
</li>

直接上CSS代码：

        li {
          float: left;
          width: 120px;
          height: 80px;
          cursor: pointer;  // 鼠标移入导航栏变小手
          .nav-tab {
            height: 80px;
            width: 104px;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            color: #ffffff;
            line-height: 80px;
            font-weight: 400;
          }
          .nav-menu {
            width: 120px;
            height: 0px;
            float: left;
            background: #ffffff;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
            border-radius: 0 0 2px 2px;
            overflow: hidden; // 让li的内容隐藏，实现从上往下显示的效果
            li {
              margin-left: 8px;
              width: 104px;
              height: 55px;
              border-bottom: 1px solid #eeeeee;
              font-size: 14px;
              line-height: 55px;
              text-align: center;
              font-weight: 400;
            }
          }
        }
        li:hover {
          .nav-tab {
            border-bottom: 4px solid #1890ff;  // 鼠标悬停时tab的底边框样式，以及下方的字体颜色
            color: #2271f7;
          }
          .nav-menu {
            transition: all 0.3s;  // 鼠标移出时menu瞬间消失，故将transition加在hover里
            height: 275px;  // 使menu的高度从0到275px，配合transition实现平滑滑下的动画效果
          }
        }

效果展示：

题外话：好家伙，弄个效果展示的gif，录屏软件一个水印，在线视频转gif又一个水印，图又小又不清晰还有俩水印在上面，心里苦哇~~~

---

2022.3.30更新：已找到不错的录屏和gif转换软件，哈哈