页面样式如下：
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又一个水印，图又小又不清晰还有俩水印在上面，心里苦哇~~~
.3.30更新：已找到不错的录屏和gif转换软件，哈哈
如果觉得《简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
