下拉菜单的实现

最新推荐文章于 2021-06-11 15:52:58 发布

麦田里的守望

最新推荐文章于 2021-06-11 15:52:58 发布

阅读量357

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_40281230/article/details/78160917

版权

说明:鼠标放在绿色框内，出现下方灰色边框和里面的内容，
实现其效果的代码如下:

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