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: darkslateblue;
}

.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;
}