直接步入正题,我们要实现的效果如下:
分析:
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="