下拉显示

最新推荐文章于 2021-12-15 11:17:42 发布

jjw_zyfx

最新推荐文章于 2021-12-15 11:17:42 发布

阅读量164

点赞数

分类专栏： css HTML 前端

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/100857017

版权

前端同时被 3 个专栏收录

296 篇文章 0 订阅

订阅专栏

css

70 篇文章 0 订阅

订阅专栏

HTML

34 篇文章 0 订阅

订阅专栏

<style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 100px;

            height: 30px;

            background-color: red;

            text-align: center;

            line-height: 30px;

            margin: 0 auto;

            border: 1px solid black;

            position: relative;

        }

        .box:hover ul{

            display: block;

        }

        ul{

            width: 100px;

            /* display: block; */

            border: 1px solid deeppink;

            left: -1px;

            position: absolute; /*只有当为absolute的时候才能用left:-1px*/

            list-style: none;

            display: none;

        }



        li:hover{

            background-color: gray;

        }

    </style>

</head>

<body>

    <div class="box">

        卖家中心

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

</body>

效果图如下：左边为正常是候，右边为hover时候效果