求助，vue怎么做二级旋转下拉菜单。
讲道理不是我懒啊，我本身技术就很弱鸡，上个星期看到了一个网站上的导航栏有个旋转下拉菜单的效果，我就想拖到vue上做一个组件出来。
但我就此陷入了一个坑。
那个纯css的旋转下拉菜单的效果是根据nth-chlid选择器里面写死的位置给他动画延迟的时间。
如果我要做到这样，应该是需要获取到二级数组的index，*延迟时间，但是我却不能在一级循环的
v-for标签里面给@mouseenter="enter(index)"添加二级数组的indexs，如果这么做会报错。
网上也找不到相应的资料，想必是没人发过这样的东西的。
下面是我目前写了的东西，如果有那个大佬知道怎么做的话，给个思路就行。
顺便可能会有人问我为什么不更react 了。。。其实用了一段时间的react之后还是觉得vue比较香。
<style lang="scss" scoped="">
.News_body{
.menu{
width: 500px;
height: 200px;
background-color: cadetblue;
display: flex;
.menuliActive{
color:deeppink;
background-color:black;
}
.menu_li{
background-color: white;
margin: 0;
text-align: center;
.menu_li_a{
padding-left: 20px;
}
.menu_cher_li{
transform:rotateY(-90deg);
transition: all 2s;
opacity:0;
background-color: #999;
}
.menu_cher_li_Active{
transform:rotateY(0deg);
opacity:1;
}
.menu_cher_li_Active a{
color: red;
}
}
}
}
</style>
<template>
<div>
新闻列表
<ul>
<li :class="{menu_li:true}" v-for="(item,index) in menuList" @mouseleave="leave()">
<a href="javascript:;" :class="item.class" @mouseenter="enter(index,indexs)"><span>{{item.onemenu}}</span>
<i class="dropimg iconfont icon-arr-left"></i></a>
<ul>
<li :class="{menu_cher_li:true,menu_cher_li_Active:index==enterindex}" v-for="(items,indexs) in item.secondMenu">
<a href="javascript:;">{{items.second}}</a></li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return{
enterindex:-1,
enterNth:0,
menuList:[
{onemenu:'首页',class:'menu_li_a iconfont icon-index',secondMenu:[{second:'企业展示'},{second:'作品展示'},{second:'博客List'},{second:'CMS布局'},]},
{onemenu:'商城演示',class:'menu_li_a iconfont icon-gouwuche',secondMenu:[{second:'主题购买'},{second:'再来购买'},]},
{onemenu:'作品中心',class:'menu_li_a',secondMenu:[{second:'自然'},{second:'花语'},{second:'旅游'},{second:'登山'},]},
{onemenu:'博客列表',class:'menu_li_a',secondMenu:[{second:'WordPress'},{second:'原创主题'},]},
]
}
},
mounted() {
},
methods:{
enter(index){
this.enterindex=index;
let Active = document.getElementsByClassName("menu_cher_li_Active")
},
leave(){
this.enterindex=-1
},
}
}
</script>
