css简易实现动态下拉框原理

洪七公 · 发表于 2023-10-6 20:48:48

直接步入正题，我们要实现的效果如下图所示：

分析：

1.鼠标上浮出现下拉框：使用hover伪类实现

2.下拉框不占下一行元素的空间：绝对定位实现

3.下拉框瀑布式弹出：css的transition属性实现

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.show-box{
width: 100%;
height: 0px;
background-color: #8A2BE2;
position: absolute;
top: 50px;
left: 0px;
overflow: hidden;
transition: 0.3s;
}
.show-box li{
float: left;
width: 100%;
height: 50px;
}
.show-box li:hover{
background-color: gainsboro;
}
.hover-box:hover .show-box{
height: 200px;
}
</style>
</head>
<body>
<div style="height: 50px;background-color:red ;">
<div class="hover-box" style="height: 50px;width: 100px;background-color: aqua;cursor: pointer;position: relative;">
<div><h1>锦尚中国</h1></div>
<ul class="show-box">
<li>2222</li>
<li>11111</li>
<li>3333</li>
<li>4444</li>
</ul>
</div>
</div>
<div style="height: 50px;background-color:blue ;"></div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			会员注册

[CSS/Html] css简易实现动态下拉框原理