运用CSS怎样做一个动态的二级菜单效果？

发布时间：2023-08-09 14:28:13 所属栏目：语言来源：

导读： 这篇文章给大家分享的是用CSS怎样做一个动态的二级菜单效果。小编觉得挺实用的，因此分享给大家做个参考，实现效果及实现代码如下，感兴趣的朋友接下来一起跟随小编看看吧。

当鼠标放到一级标签上时，鼠标会

这篇文章给大家分享的是用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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!