SOURCE

var lisFirst = document.querySelectorAll('.firstUL > li');
for (let i = 0; i < lisFirst.length; i++) {
    lisFirst[i].addEventListener('mouseover', function() {
        var lisSecond = this.querySelectorAll('.secondUL li');
        var h = lisSecond.length > 0 ? lisSecond[0].offsetHeight: 0;
        for (let j = 0; j < lisSecond.length; j++) {
            lisSecond[j].style.top = j * h + 'px';
            lisSecond[j].style.transition = 'top ' + (j + 1) * 0.15 + 's';
        }
    });

    lisFirst[i].addEventListener('mouseout', function() {
      	var lisSecond = this.querySelectorAll('.secondUL li');
        for (let j = 0; j < lisSecond.length; j++) {
            lisSecond[j].style.top = 0;
        }
    })
}

<div class="box">
  <ul class="firstUL">
    <li>
      导航1
      <ul class="secondUL">
        <li>
          二级
        </li>
        <li>
          二级
        </li>
        <li>
          二级
        </li>
        <li>
          二级
        </li>
        <li>
          二级
        </li>
      </ul>
    </li>
    <li>
      导航2
      <ul class="secondUL">
        <li>
          二级
        </li>
        <li>
          二级
        </li>
        <li>
          二级
        </li>
      </ul>
    </li>
    <li>
      导航3
      <ul class="secondUL">
        <li>
          二级
        </li>
        <li>
          二级
        </li>
        <li>
          二级
        </li>
      </ul>
    </li>
    <li>
      导航4
      <ul class="secondUL">
      </ul>
    </li>
    <li>
      导航5
      <ul class="secondUL">
      </ul>
    </li>
  </ul>
</div>

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.firstUL {
  width: 400px;
  height: 40px;
  display: block;
  margin: 50px auto;
  background: #9b9b9b;
}

.firstUL > li {
  float: left;
  width: 80px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.firstUL > li:hover .secondUL {
  display: block;
}

.secondUL {
  width: 80px;
  display: none;
  position: relative;
}

.secondUL li {
  width: 100%;
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
}