css3实现高度从固定到自动的过渡动画

想实现css高度从0到auto的transition动画，发现直接写没有效果。查了一下，发现可以用max-height解决
当然用max-height还得加上overflow:hidden。
css

.menu{
        display: inline-block;
        float: right;
        width: 70%;
        text-align: right;
    }
    .menu>li{
        position: relative;
        display: inline-block;
        padding: 0 2%;
    }
    .menu>li>a{
        display: inline-block;
        font-weight: 600;
        font-size: 20px;
        color:#fff;
        height: 89px;
    }
    .menu>li ul{
        position: absolute;
        max-height: 0;
        width: 200%;
        left: -50%;
        overflow: hidden;
        background:rgba(112,140,151,0.6);
    }
    .menu>li ul li{
        height: 30px;
        margin: 5px;
        text-align: center;
        line-height: 30px;
    }
    .menu>li ul li a{
        color: #fff;
        font-size: 18px;
        display: block;
    }
    .menu>li:hover{
        height: 87px;
        overflow: visible;
        box-sizing: border-box;
    }
    .menu>li:hover >a{
        border-bottom: 4px solid #f8ff30;
        /*padding-bottom: 3px;*/
        box-sizing: border-box;
        color: #818181;
    }
    .menu>li:hover ul{
        max-height: 250px;
        transition: max-height 1s ease;
        padding-bottom: 20px;
    }
    .menu>li ul li:hover a{
        color: #818181;
    }

html

<ul class="menu">
                    <li>
                        <router-link :to="{path: '/home'}">首页</router-link>
                    </li>
                     <li @mouseover = "showSubmenu(0)"><router-link :to="{path: '/home/IntoGaoxin/aboutus'}" >走进高新</router-link>
                        <ul class="submenu">
                            <li>
                                <router-link :to="{path: '/home/IntoGaoxin/aboutus'}" >关于我们</router-link>
                            </li>
                            <li>
                                <router-link :to="{path: '/home/IntoGaoxin/yjhjzg'}" >愿景和价值观</router-link>
                            </li>
                            <li>
                                 <router-link :to="{path: '/home/IntoGaoxin/glhcx'}" >管理和创新</router-link>                         
                            </li>
</ul></li></ul>