下拉菜单ul li

最新推荐文章于 2024-04-27 16:48:56 发布

老男人，

最新推荐文章于 2024-04-27 16:48:56 发布

阅读量956

点赞数 2

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/qq_45889379/article/details/120421227

版权

笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            overflow: hidden;
            margin: 20px auto;
        }
        .box>ul>li{
            float: left;
            list-style: none;
            margin: 0px 35px;
            font-size: 20px;
            line-height: 50px;
            font-family: '微软雅黑';
        }
        .box>ul>li>ul>li{
            list-style: none;
            color: black;
            font-family: '宋体';
        }
        .box>ul>li>ul{
            background-color:#f16a4c;
            height: 0px;
            transition: .5s;
            overflow: hidden;
            line-height: 30px;
            font-size: 15px;
            text-align: center;
        }
        .box>ul>li:hover>ul{
            height: 120px;
        }
        .box>ul>li>ul>li:hover{
            background-color: #f3947f;
            color: white;
        }
        .box>ul>li:hover{
            color: #f3947f;
        }
    </style>

<body>
    <div class="box">
        <ul>
            <li>下拉菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>下拉菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>下拉菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>下拉菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

老男人，

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单ul li

<style> *{ margin: 0; padding: 0; } .box{ width: 700px; overflow: hidden; margin: 20px auto; } .box>ul>li{ float: left; .
复制链接

扫一扫