vue js应用中子菜单快速消失

如何解决vue js应用中子菜单快速消失

大家好，我遇到了一个小问题，将菜单项悬停在导航栏中时，子项出现但很快消失。用户无法选择所需的选项。我真正想要的是在用户悬停时按住它（子菜单）项。

以下是我的应用程序的 HTML 和 CSS 代码：

HTML 代码

<template>
    <div class="navigation">
         <v-toolbar extended extension-height="10" color="blue">
            <v-row>
              <v-col cols="6" class="nav-el hidden-md-and-down" > 
                  <div class="navbar">
                     <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li>
                            <a href="#">Products ▾</a>
                            <ul class="dropdown">
                                <li><a href="#">Laptops</a></li> <hr>
                                <li><a href="#">Monitors</a></li> <hr>
                                <li><a href="#">Printers</a></li> <hr>
                            </ul>
                        </li>
                        <li><a href="#">Contact</a></li>
                  </ul>
                  </div>
                </v-col> 
       </v-row>
      </v-toolbar>
    </div>
    </template>

CSS 代码

.navigation{
  position: relative;
  z-index: 30;
}
.navigation .nav-el{
  margin-top: 20px;
  text-align: center;  
}

.navigation .navbar li{
  text-decoration: none;
  display: inline-block;
  padding-left: 10px; 
  font-family: Arial,Helvetica,sans-serif; 
  font-size: large;
  position: relative;

}
.navigation .navbar a{
  text-decoration: none;
  color : white;
  padding: 10px;
  background-color: #2196F3;
}
.navigation .navbar a:hover{
  background-color: rgb(89,160,241);
}
.navigation .navbar .dropdown li {
  display: block;
  text-align: left;
  padding: 9px;
  background-color: rgb(89,241);
  min-width: 120px;
}
.navigation .navbar .dropdown li a{
  background-color: rgb(89,241);
}
 .navigation .navbar .dropdown{ 
  position:absolute;
  opacity: 0.9;
  padding: 10px 10px;
  display: none;

}
 .navigation .navbar li:hover ul.dropdown{
   display: block;

}