使用css实现打开抽屉效果（css过渡动画）

方法一，使用高度方式，高度从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;
      }