源码论坛,商业源码下载,尽在锦尚中国商业源码论坛
标题:
css简易实现动态下拉框原理
[打印本页]
作者:
洪七公
时间:
2023-10-6 20:48
标题:
css简易实现动态下拉框原理
直接步入正题,我们要实现的效果如下图所示:
(, 下载次数: 145)
上传
点击文件名下载附件
分析:
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>
复制代码
欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)
Powered by Discuz! X3.3