本文共 1669 字，大约阅读时间需要 5 分钟。

利用html+css实现菜单栏缓慢下拉效果

我们可以用两种方法来解决这个问题

方法一：过渡（transition）

• 对forum-1开启绝对定位(absolute)，让里面的li从其父元素中脱离出去，不然会把之后的内容往右挤，并且设置overflow：hidden, 设置高度为0， 鼠标移入后再设置相应的高度即可

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

• html 代码如下：

   
      
    
       
     
        
      
         
       
          
        
           
           
         
          

          

           
            博客
           
          

          
           
            论坛
            
  
            
             

             

              
               css
              
             

             
              
               vue
               

               

                
                 python
                
               
  
               

               

               

                
                 直播
                
  
              
             
            
           
          
         
        
       
      
     
    
   

css 样式代码如下：

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;}

试了很多次发现，transition是不支持display属性的，也就是说，不能用display：none隐藏菜单栏

方法二：动画（animation）

• 首先创建css动画：

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

• 然后设置display：none隐藏菜单样式，把它绑定到forum-1选择器中，用animation绑定动画名字，设置持续时间

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

• 当鼠标移入时，设置display属性为block即可

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

• 需要注意的一点是，这样写的结果会出现一个问题：当鼠标移入不久后二级菜单栏会自动收回，为了避免这种问题，我们可以在forum-1选择器内部添加一行代码即可：

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

其余代码和方法一的代码相同，这里不再赘述

• 效果图如下：

转载地址：https://blog.csdn.net/weixin_45877762/article/details/115030046 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！