想实现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>
