将鼠标悬停在vuejs中的父菜单或子菜单上时如何继续显示动态子菜单？

Question

I need help regarding this sidebar in vuejs, I am trying to make a dynamic sidebar where I have to keep open the submenu while hovering over the parent menu or the submenu, whenever I remove the mouse from parent the submenu disappear. I need to keep opening the submenu. Here is my code:

<div v-for="item in items" class="categories" >
       <p  @mouseover="onOver(item)" @mouseleave="onLeave">{{item.title}}</p>
       <div v-if="ShowSubMenu" class="subMenu">
           <div v-for="childItem in item.child" > <p class="text"> {{childItem.childTitle}}</p> </div>
           </div>

       </div>

     </div>

Vue Js:

data: {
  ShowSubMenu: false,

    items: [
    {
       title: 'name'
      },
      {
       title:'hoverMe',
       child : [
       {childTitle : 'ChildTitle1'},
        {childTitle : 'ChildTitle2'},
         {childTitle : 'ChildTitle3'},

       ] ,
       },
       { 
        title: 'name3'}
    ]
  },
  methods: {
    onOver: function(item){
        if (item.child != null) {
      this.ShowSubMenu=true;


      }
    },
    onLeave: function(){

      this.ShowSubMenu=false;



    }
  }

css:

.categories{
  background-color:red;
  width:100px;
  height:200px;
}
.subMenu{
  background-color:red;



  height:150px;
  width:150px;
  position:absolute;
  top:100px;
  left:150px;

}
.text{
  color:blue;





}

Answer 1

This would be one of the possible solutions to your problem. It's purely CSS based too:

https://jsfiddle.net/vugrjbn6/16/

.categories{
  background-color: red;
  width: 100px;
  height: 200px;
  position: relative;
}

.subMenu{
  display: none;
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
  top: 0;
  left: 100%;
}

.categories:hover .subMenu {
  display: block;
}

It works by displaying the submenu only if the category is hovered. The important thing to realize is that category contains the title AND submenu. So by default submenu is hidden, if you first hover the title it gets displayed, and it stays displayed as long as you keep hovering title or submenu (as both are part of category).