总的来说是使用伪类和过度效果形成的一种方法
css部分
.xft{
position: absolute;
left: 0;
top: 130px;
width: 100%;
height: 0;//不设置高度
background-color: #fff;
text-align: center;
z-index: 5;
overflow: hidden;
transition: all .3s;//过度效果
}
.phone li:hover>.xft{
height: 229px;//在此处设置高度
box-shadow: 0 3px 4px rgba(0, 0, 0, 18);
}
不设置对应方向的宽度或者长度,再设置过度(transition)
在伪类设置中令该宽度或长度到达预定的位置。就可以看到窗口是弹出,而不是突然出现