下拉菜单

最新推荐文章于 2025-01-23 10:58:15 发布

唥颜

最新推荐文章于 2025-01-23 10:58:15 发布

阅读量197

点赞数

分类专栏： javaScript基础

本文链接：https://blog.youkuaiyun.com/qq_40351096/article/details/78228605

版权

javaScript基础专栏收录该内容

6 篇文章

订阅专栏

这里写图片描述


<!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>