H5C3-实现下拉栏——Html案例

最新推荐文章于 2022-04-17 15:41:49 发布

StudiousTiger

最新推荐文章于 2022-04-17 15:41:49 发布

阅读量246

点赞数

文章标签： html5 css3 css html

本文链接：https://blog.csdn.net/m0_45067620/article/details/106976198

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .one{
            width: 150px;
            margin: 50px auto;
        }
        .one ul{
            height: 40px;
            width: 150px;
            background-color: blue;
            overflow: hidden;
            transition:0.3s
        }
        .one ul li{
            height: 40px;
            width: 150px;
            line-height: 40px;
            text-align: center;
        }
        .one:hover ul{
            height: 160px;
        }
        .one li:hover{
            background-color: rgb(19, 19, 141);
        }
    </style>
</head>

<body>
    <div class="one">
        <ul>
            <li>5555555555</li>
            <li>2222222222</li>
            <li>5555555555</li>
            <li>4444444444</li>
        </ul>
    </div>
</body>

</html>

描述：先设置div的宽高（在没有hover时，想要显示的宽高），然后设置overflow: hidden；设置ul的宽高，width=div的宽，height=div的高li的个数，设置过渡时间0.3s;当hover ul时，div的height设置为div的高li的个数

效果图：

hover ul前
hover ul后

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5C3-实现下拉栏——Html案例

<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; list-style: none; } .one{
复制链接

扫一扫

专栏目录