黑松山资源网

css 实现动态二级菜单
站长资源 2024/11/15 佚名
2 0
黑松山资源网 Design By www.paidiu.com

动态实现简单的二级菜单

css 实现动态二级菜单

当鼠标放到一级标签上时，鼠标会变成小手的形状 展示二级菜单，源码如下，复制即可直接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0; padding: 0;}
        ul { list-style: none;}
        div {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }
        .first {
            width: 100px;
            height: 50px;
            float: left;
            margin-right: 70px;
            /* background-color: pink; */
            cursor: pointer;
            text-align: center;
            line-height: 50px;
            border-radius: 15px;
        }
        .second li{
            width: 80px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
            margin-top: 10px;
        }
        .second {
            display: none;
        }
        .first:hover .second{
            display: block;
            cursor: pointer;
        }
        .first:hover {
            background-color: pink;
        }
    </style>

<body>
    <div>
        <ul>
            <li class="first">
                <p>一级标签</p>
                <ul class="second">
                    <li>二级标签</li>
                    <li>二级标签</li>
                </ul>
            </li>

            <li class="first">
                <p>一级标签</p>
                <ul class="second">
                    <li>二级标签</li>
                    <li>二级标签</li>
                </ul>
            </li>
        </ul>
    </div>

</body>
</html>

总结

黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com