方法一，使用高度方式，高度从0到展示进行过渡
HTML代码：

   <div class="container"><div class="menu">菜单</div><div class="box"></div></div>

CSS代码：

    .box {width: 400px;height: 0;background-color: red;transition: all 1s ease;}.menu{height: 50px;}.menu:hover ~ .box{height: 300px;}

方法二，使用定位方法，相对较麻烦
HTML代码：

  <div class="container"><div class="menu">菜单</div><div class="box"><div class="drawer"></div></div></div>

CSS代码

.container{background-color: #fff;}.box{position: relative;overflow: hidden;}.drawer {width: 400px;height: 300px;background-color: red;overflow: hidden;position: absolute;top: -300px;transition: all 1s ease;}.menu{height: 50px;}.menu:hover ~ .box{ /* 悬浮时，在此处绘制容器宽高，可以避免在抽屉未打开时，占用高度 */width: 400px;height: 300px;}.menu:hover ~ .box .drawer{top: 0px;}