【CSS】css弹出菜单设置示例

最新推荐文章于 2023-09-05 13:26:26 发布

敦厚的曹操

最新推荐文章于 2023-09-05 13:26:26 发布

阅读量594

点赞数 1

分类专栏： 5.【css】 4.【html】文章标签： css 前端弹出菜单

本文链接：https://blog.csdn.net/dxnn520/article/details/122372287

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    body {
        background-color: rgb(223, 223, 223);
    }

    .word {
        font-size: 15px;
        text-align: left;
        height: 30px;
        background-color: blanchedalmond;
        padding-left: 20px;
        line-height: 31px;
    }

    .city {
        width: 50px;
        background-color: rgb(233, 203, 158);
        padding-left: 20px;
    }

    .city:hover {
        background-color: white;
    }

    /*  城市div下一个紧挨着的DIV中，CSS设置为显示  */
    .city:hover + .list {
        display: block;
    }

    /* 城市列表*/
    .list {
        background-color: rgb(255, 255, 255);
        width: 300px;
        margin-top: -15px;
        display: none;
        /* 默认隐藏 */
    }

    /* 鼠标移入，不消失 */

    .list:hover {
        display: block;

    }
</style>

<body>
    <div class="word">
        <div class="city">
            北京
        </div>
        <div class="list">
            <ul>
                <li><a href="baidu">河北</a></li>
                <li><a>河南</a></li>
                <li><a>北京</a></li>
                <li><a>天津</a></li>
            </ul>
        </div>
    </div>

  


</body>

</html>

敦厚的曹操

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】css弹出菜单设置示例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫