title: Submenu disappeared quickly in vue js application
body: <p>Hi Everyone I'm facing a small issue where on hovering the menu item in nav-bar the sub-item appears but quickly disappears. The user is unable to select the desired option. WHAT i actually want is to hold it (sub-menu) item while the user hovers it.</p>
  <p><strong>Following is HTML and CSS code of my application:</strong></p>
  <p><strong>HTML CODE</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;navigation&quot;&gt;
           &lt;v-toolbar extended extension-height=&quot;10&quot; color=&quot;blue&quot;&gt;
              &lt;v-row&gt;
                &lt;v-col cols=&quot;6&quot; class=&quot;nav-el hidden-md-and-down&quot; &gt; 
                    &lt;div class=&quot;navbar&quot;&gt;
                       &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=&quot;#&quot;&gt;Products ▾&lt;/a&gt;
                              &lt;ul class=&quot;dropdown&quot;&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Laptops&lt;/a&gt;&lt;/li&gt; &lt;hr&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Monitors&lt;/a&gt;&lt;/li&gt; &lt;hr&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Printers&lt;/a&gt;&lt;/li&gt; &lt;hr&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;/div&gt;
                  &lt;/v-col&gt; 
         &lt;/v-row&gt;
        &lt;/v-toolbar&gt;
      &lt;/div&gt;
      &lt;/template&gt;
  </code></pre>
  <p><strong>CSS CODE</strong></p>
  <pre><code>.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, 160, 241);
    min-width: 120px;
  }
  .navigation .navbar .dropdown li a{
    background-color: rgb(89, 160, 241);
  }
   .navigation .navbar .dropdown{ 
    position:absolute;
    opacity: 0.9;
    padding: 10px 10px;
    display: none;
  
  }
   .navigation .navbar li:hover ul.dropdown{
     display: block;
  
  }
  </code></pre>