利用html+css实现菜单栏缓慢下拉效果的示例代码如何通过 display:olck/none 完成一个菜单栏使用layui实现左侧菜单栏及动态操作tab项的方法Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码使用HTML+CSS实现鼠标划过的二级菜单栏的示例详解css3 Transition属性（平滑过渡菜单栏案例）菜单栏 “三” 变形为“X”css3过渡动画利用CSS实现几款不错的菜单栏实例代码CSS仿网易首页的头部菜单栏按钮和三角形制作方法纯CSS制作菜单栏当鼠标经过时会变色的

 .code .forum-1{ /* 开启绝对定位 */ position: absolute; overflow: hidden; height: 0; transition-duration: 0.5s; } 

博客
论坛
css
vue
python
直播

 a{ display: block; text-decoration: none; color: #333; } .code{ width: 390px; height: 50px; line-height: 50px; background-color:#bfa; margin: 5px auto; } .code li{ float: left; width: 130px; height: 50px; background-color: #bfa; text-align: center; margin: 0 auto; font-size: 20px; } .code > li:last-child{ margin-right: 0; } .code > li:hover{ background-color: #f8f192; } .forum{ position: relative; margin: auto 90px; } .code .forum-1{ /* 开启绝对定位 */ position: absolute; overflow: hidden; height: 0; transition-duration: 0.5s; } .forum:hover .forum-1{ /* 鼠标移入释放高度 */ height: 150px; } 

 @keyframes frames{ from{ height: 0px; } to{ height: 150px; } } 

 .forum-1{ position: absolute; display: none; overflow: hidden; /* 绑定动画名字并且设置持续时间 */ animation-name: frames; animation-duration: 0.5s; } 

 .forum:hover .forum-1{ display: block; } 

 .forum-1{ animation-fill-mode: forwards; }