直接步入正题，我们要实现的效果如下：
分析：
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="height: 50px;background-color:blue ;"></div>
</body>
(这里的cursor:pointer为鼠标上浮后鼠标的形状变为指针)
3.接下来是重点：下拉框
第一步:先解决下拉框位置问题，下拉框的位置要正好位于浅蓝色大盒子的下方紧贴着，左边与盒子对齐，宽度与盒子一致这里我们采用绝对与相对定位，鼠标移至浅蓝色盒子下拉框弹出
首先在浅蓝色盒子加入一个子元素ul或者div都行(这个子元素在内容盒子的前或者后都无所谓)，有些人会问为什么不是加在浅蓝色大盒子后或者红色大盒子后，因为效果图中鼠标浮上浅蓝色盒子之后出现下拉框，此时需要将鼠标移出浅蓝色盒子才能碰到下拉框，但是的下拉框不是浅蓝色盒子的子元素或者后代元素的话，鼠标一旦移到下拉框，就会被识别到移出浅蓝色盒子，下拉框就会消失，所以我们把下拉框设置为浅蓝色盒子的子元素，这样当鼠标想从浅蓝色盒子移至下拉框时，移到下拉框之后也会被认为鼠标还是在浅蓝色盒子内移动，所以下拉框不会消失，这里的原理是hover冒泡，这里不作展开
其次，在浅蓝色盒子元素上设置position: relative;让下拉框相对于浅蓝色盒子来设置位置，下拉框元素ul或者div上设置position: absolute;然后定位为top:浅蓝色盒子高度px;left:0px;，下拉框高度自定，宽度继承浅蓝色盒子(这里定位很多人也会问为什么不是bottom：0px，做到最后就知道效果了，自己可以体验一下，这里透露一下bottom设为0的话是瀑布往上)
<body>
<div style="height: 50px;background-color:red ;">
<div style="height: 50px;width: 100px;background-color: aqua;cursor: pointer;position: relative;">
<div><h1>内容</h1></div>
<ul style="width: 100%;height: 200px;background-color: #8A2BE2;position: absolute;top: 50px;left: 0px;">
</ul>
</div>
</div>
<div style="height: 50px;background-color:blue ;"></div>
</body>
如果按照代码没有出效果，多了很多空隙，是因为浏览器默认给元素加了边距，所以将所有元素的边距设为0即可
<style>
*{
margin: 0px;
padding: 0px;
}
</style>
最后就是鼠标浮动，下拉框瀑布弹出
在浅蓝色盒子上设置hover，hover后的效果是使下拉框从上往下展示出来，背后的含义就是hover后下拉框的高度从0缓慢的变成200
我们首先在下拉框里加点内容
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.show-box li{
float: left;
width: 100%;
height: 50px;
}
.show-box li:hover{
background-color: gainsboro;
}
</style>
<ul class="show-box" style="width: 100%;height: 200px;background-color: #8A2BE2;position: absolute;top: 50px;left: 0px;">
<li>2222</li>
<li>11111</li>
<li>3333</li>
<li>4444</li>
</ul>
把下拉框的高度设为0，在浅蓝色盒子被hover时设置为200，注意在高度设置为0时，li标签中的内容是会显示出来的所以我们需要再为下拉框加上一个overflow:hidden的属性，意思是内容超过宽度或者高度就隐藏，最关键的一步是为下拉框加上一个transition: 秒数s;，这个属性的意思就是在元素从一个状态变成另一个状态需要的时间，不加上这个元素的话高度从0变成到200是瞬间的，加上这个属性后，高度的变化是缓慢执行的
☆☆☆最终代码为：
<!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>
最终效果图：