我的老板决定用另一个子页面扩展菜单栏,以前完全可以正常工作的内容(一个简单的子菜单)现在不想工作,因为它在另一个子菜单下有一个子菜单。 这是图片:
As you can see when I hover "Acts" the sub menu with External and Internal documents works perfectly fine
但是,当我想将光标移到带有“导演命令”的另一个子菜单上时,整个菜单都隐藏了。我认为这是因为第二个子菜单(孙子)没有将信息传递给主菜单元素(祖父母)来保持菜单处于活动状态,但是我不知道如何解决此问题。 这是代码:
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1">Acts <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list color="#F0FAFE">
<router-link to="/External"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">External</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Internal <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list color="#F0FAFE">
<v-menu open-on-hover bottom offset-x transition="slide-x-transition">
<template v-slot:activator="{ on }">
<v-list-item link v-on="on">
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Director's Orders <v-icon class="menu-icon">keyboard_arrow_right</v-icon></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list
color="#F0FAFE"
v-for="(item, index) in Orders"
:key="index"
>
<router-link :to="'/' + item.title"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
</v-list>
</v-menu>
<router-link to="/Other"><v-list-item link>
<v-list-item-content>
<v-list-item-title class="subtitle-1 font-weight-medium">Other</v-list-item-title>
</v-list-item-content>
</v-list-item></router-link>
</v-list>
</v-menu>
</v-list>
</v-menu>
还有一点免责声明。是的,我知道这种类型的菜单不是“材料设计”菜单,这是vuetify的基础