css简易实现动态下拉框原理_css 动画实现下拉框弹出效果-CSDN博客

本文链接：https://blog.csdn.net/qq_37580940/article/details/126869021

直接步入正题，我们要实现的效果如下：
在这里插入图片描述

分析：
1.鼠标上浮出现下拉框：使用hover伪类实现
2.下拉框不占下一行元素的空间：绝对定位实现
3.下拉框瀑布式弹出：css的transition属性实现
（想要直接copy代码的同学可以直接跳到最后面☆☆☆最终代码标识处）

下面是代码逐步实现：
1.首先为了保证下拉框弹出不占据后面元素的空间，我们提前设置两行div，高度自定义.(这里因为是代码逐步演示，所以写的内联CSS，之后整体再把所有代码放出来)

<body>
		<div style="height: 50px;background-color:red ;"></div>
		<div style="height: 50px;background-color:blue ;"></div>
</body>

在这里插入图片描述

2.然后我们在第一行中加上一个元素，这个元素的作用是鼠标上浮，并且在这里元素里再添加一个元素，用于存放内容

<body>
		<div style="height: 50px;background-color:red ;">
			<div style="height: 50px;width: 100px;background-color: aqua;cursor: pointer;">
				<div><h1>内容</h1></div>
			</div>
		</div>
		<div style="