下拉菜单

最新推荐文章于 2022-05-26 22:18:32 发布

lkktyz

最新推荐文章于 2022-05-26 22:18:32 发布

阅读量173

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/lkktyz/article/details/78095192

版权

下拉菜单简版

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .top{
                width: 100px;
            }

            .btn{
                width: 100px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                background: #00FA9A;
                color: white;
            }

            .xl{
                height: 200px;
                width: 100px;
                display: none;
                background: #CCCCFF;
            }

            .btn:hover{
                background: #008000;
                cursor: pointer;
            }

            .top:hover .xl{
                display: block;

            }

            .top:hover .btn{
                background: #008000;
            }

            a{
                display: block;
                text-decoration: none;
                height: 40px;
                text-align: center;
                line-height: 40px;
                color:black;
            }

            a:hover{
                background: #6699ff;
                color: white;
            }
        </style>
    </head>
    <body>

        <div class="top">

            <div class="btn">
                下来菜单
            </div>

            <div class="xl">
                <a href="">链接</a>
                <a href="">链接</a>
                <a href="">链接</a>
                <a href="">链接</a>
            </div>

        </div>


    </body>
</html>

lkktyz

关注

0
点赞
踩
0

收藏

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

下拉菜单简版<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .top{ width: 100px; } .btn{
复制链接

扫一扫