<div class='nav'>
  <span>Link</span>
  <div class='b'>
    <a href='#'>Library</a>
    <a href='#'>Data</a>
  </div>
</div>
.nav
  width 125px
  height 45px
  line-height @height
  text-align center
  background #dee1e6
  border-radius 5px
  margin 30px auto
  position relative
  box-shadow 3px 3px 3px rgba(black,.3)
  transition width .4s .5s,height .4s .3s
  &:hover
    width 200px
    height 83px
    transition width .4s,height .4s .3s
    .b
      opacity 1
      transition opacity .4s .5s
  .b
    position absolute
    left 50%
    top @height
    width 100%
    height 35px
    line-height @height
    display flex
    justify-content space-around
    opacity 0
    transform translateX(-50%)
    transition opacity .4s
    a
      width 100%
      height 100%
      color black
      background white
      border-radius 3px
      margin 0 3px
      
  
  
  
View Compiled
// 主要是使用:hover来覆盖原先的补间动画
// :hover内的是移入补间,默认的是移出补间

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.