vuetify dropdown v-menu with submenu don't close on select - vue.js

Question

Working with Vuetify and have problem with the submenu to a a dropdown menu.
Everything works as it should, except for the main dropdown menu that does not closes when click on a submenu item. The submenu closes as it should.
1. The dropdown menu open on click
2. The submenu open on hover
3. If I click on a main menu item, the whole menu close. I want it to stay open as I don't have any router link for the main menu items, only for the submenu items.
4. If I click on a submenu item, I get routed to the new page, but the main menu does not close, only the submenu. Have to click a second time outside the dropdown box to close it.
I have tried with "close-on-click" and "close-on-content-click" without sucsess.
<v-menu offset-y :close-on-select="true">
<v-btn flat slot="activator">
<v-icon left>expand_more</v-icon>
<span>Our Adventures</span>
</v-btn>
<v-list class="py-0">
<v-list-tile>
<router-link to="/adventures">
<v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
</router-link>
</v-list-tile>
</v-list>
<v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
<v-menu offset-x right open-on-hover>
<v-list-tile slot="activator">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<v-list dense>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click="close"
router
:to="subItem.link"
>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list>
</v-menu>
and the related script
items: [
{
title: "Nordic skating",
items: [
{ title: "Open tour", link: "/adventures/skating/weekend" },
{ title: "Private tour", link: "/adventures/skating/private" }
]
},
{
title: "Kayak",
items: [
{ title: "Open tour", link: "/adventures/kayak/weekend" },
{ title: "Private tour", link: "/adventures/kayak/private" }
]
},
{
title: "Hiking",
items: [
{ title: "Open tour", link: "/adventures/hiking/eightdays" },
{ title: "Private tour", link: "/adventures/hiking/private" }
]
},
{
title: "Cross country skiing",
items: [
{ title: "Open tour", link: "/adventures/skiing/weekend" },
{ title: "Private tour", link: "/adventures/skiing/private" },
{
title: "Winter adventures",
link: "/adventures/skiing/adventures"
}
]
}
],

Answer 1

Solved the issue of parentMenu not closing by using ref and the isActive property.
Steps:
Add ref = "parentMenuRef" to the parent v-menu
In the childMenu items, add #click="$refs.parentMenuRef.isActive = false"
This will close the parentMenu along with the childMenu when the childMenu item is clicked. Original answer

Answer 2

Remove the "open-on-hover" then it will work as it should be. Open-on-hover gives effect close window on 2 time click. I had same issue and no success. I would suggest you to custom menu instead of Vuetify menu.

Answer 3

You have not mentioned Vuetify version, but I assume it's 1.x.
Here's what I have done in my projects:
In top level v-menu, close-on-content-click="true". This prop is true by default, so, you don't need to add it.
The inner v-menu will have open-on-hover, which you code already has.
Moved the slot="activator" to a template.
On the activator of inner v-menu, I have added #click.stop.prevent
So, your code should look like:
<v-menu offset-y>
<v-btn flat slot="activator">
<v-icon left>expand_more</v-icon>
<span>Our Adventures</span>
</v-btn>
<v-list class="py-0">
<v-list-tile>
<router-link to="/adventures">
<v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
</router-link>
</v-list-tile>
</v-list>
<v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
<v-menu offset-x right open-on-hover>
<template slot="activator">
<v-list-tile
#click.stop.prevent
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
<template>
<v-list dense>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click="close"
router
:to="subItem.link"
>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list>
</v-menu>
Side Note: slot attribute is deprecated in Vue 2.6. Please consider using v-slot directive. https://v2.vuejs.org/v2/guide/components-slots.html