web-前端之下拉菜单演示

最新推荐文章于 2024-07-29 12:13:58 发布

h_Snow_1

最新推荐文章于 2024-07-29 12:13:58 发布

阅读量5.8k

点赞数 7

分类专栏：前端H5 文章标签：鼠标前端

本文链接：https://blog.csdn.net/h_Snow_1/article/details/78095614

版权

前端H5 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

这是一个简单的下拉菜单的演示，只要鼠标放在上面，便会显示出这个下拉菜单，其实也是一个简单的鼠标悬停样式的体现

这是一个简单的下拉菜单


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a{
                width: 205px;
            }
            .b{
                width: 200px;
                height: 50px;
                background-color: limegreen;
                text-align: center;
                line-height: 50px;
                color: #ffffff;
            }
            .c{
                width: 200px;
                height: 300px;
                background-color: gainsboro;
                display: none;
                /*visibility: hidden;*/
            }
            ul{
                list-style: none;
                margin-left: -40px; 
            }
            ul li{
                line-height: 50px;
                display: block;
                width: 200px;
                text-align: center;
            }
            .a:hover{
                cursor: pointer;
            }
            .a:hover .c{
                display: block;
            }
            .a:hover .b{
                background-color: green;
            }
            li:hover{
                background-color: gray;
                color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <div class="a">
            <div class="b">
                关于我们
            </div>
            <div class="c">
                <ul>
                    <li>公司简介</li>
                    <li>董事长致辞</li>
                    <li>企业文化</li>
                    <li>团队风采</li>
                </ul>
            </div>
        </div>
    </body>
</html>