二级下拉菜单transition实现缓动效果

最新推荐文章于 2023-07-01 14:33:19 发布

我要去看得最远的地方

最新推荐文章于 2023-07-01 14:33:19 发布

阅读量1.2k

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/qq_42434171/article/details/105290308

版权

这个是我搜的百度到的答案，用transition，对于display是不起作用的，所以我们可以用高度为0px进行控制还需要overflow：hidden一起用这样才可以正常显示，hover的话改成相应的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
       *{padding:0px;margin:0px;}
       ul{list-style:none;  }
       ul li a{
            text-decoration: none;
            color: #fff;background-color:#00f;font-weight:bold;
        padding:0px 10px; height:40px;line-height: 40px;
        display:block;
        }
        ul li{ float:left;
        position:relative;  }
        ul li a:hover{
            background-color:green;

        }


        ul li ul{
            position:absolute;
            overflow: hidden;    //       //用//已标出代码实现transition的关键
            height:0px;          //
            transition:0.5s;      //
        }
        ul li ul li{
            float:none;
            width:100px;
            display: block;

        }

        ul li:hover ul{
          transition-duration:0.5s;    //
            height:130px;            //
        }

    </style>
</head>
<body>
    <div>
         <ul>
              <li><a href="#">新闻中心</a></li>
              <li><a href="#">师资队伍</a></li>
              <li><a href="#">学院概况</a>
                <ul>
             <li><a href="#">数信学院</a>
             </li>

              <li><a href="#">计算机学院</a>

              </li>
              <li><a href="#">外国语学院</a>
              </li>
              </ul>
              <li><a href="#">科学研究</a>
                <ul>
             <li><a href="#">数信学院</a>
             </li>

              <li><a href="#">计算机学院</a>

              </li>
              <li><a href="#">外国语学院</a>
              </li>
              </ul></li>
              <li><a href="#">学生工作</a></li>
          </ul>
    </div>
</body>
</html>

我要去看得最远的地方

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
二级下拉菜单transition实现缓动效果

这个是我搜的百度到的答案，用transition，对于display是不起作用的，所以我们可以用高度为0px进行控制还需要overflow：hidden一起用这样才可以正常显示，hover的话改成相应的高度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /&gt...
复制链接

扫一扫