css:鼠标滑上li会显示下拉菜单(小米真实例子)?

最新推荐文章于 2022-08-08 20:40:31 发布

weixin_34043301

最新推荐文章于 2022-08-08 20:40:31 发布

阅读量766

点赞数

原文链接：https://juejin.im/post/5c2226635188250918138483

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.鼠标滑过会出现下拉菜单css实现</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            list-style: none;
        }
        .box li{
            width: 234px;
            height: 300px;
            background: greenyellow;
            margin: 50px auto;
        }
        .box li{
            position: relative;
            overflow: hidden;
        }
        .box li:hover{
            box-shadow: 0 15px 30px rgba(0,0,0,.3);
            transform: translateY(-2px);
        }
        .box li:hover .bottom{
            bottom: 0;
        }
        .bottom{
            position: absolute;
            left: 0;
            bottom: -50px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: hotpink;
        }
        p{
          text-align: center;
          color: #ffffff;
        }
    </style>
</head>
<body>
<ul class="box">
   <li>
       <div class="bottom">
       <p>多的是你不知道的事儿~~~</p>
       </div>
   </li>
</ul>
</body>
</html>
复制代码

weixin_34043301

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css:鼠标滑上li会显示下拉菜单(小米真实例子)?

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;7.鼠标滑过会出现下拉菜单css实现&lt;/title&gt; &lt;style&gt; *{
复制链接

扫一扫