title: jQuery plugin to close dropdown menu on mouseover
body: <p>I have a simple set of links on my page, and one of the links shows a dropdown menu on mouseover (see the image below).  The dropdown submenu becomes visible on mouseover of the link it is attached to (How fast is it?), and stays fixed in place due to display: block (see the css code below for dropdown-content).  I want that dropdown submenu to disappear when I mouse over any of the main links on the page (not the sublinks), including links that are partially hidden by the dropdown menu.  For that, I think I will need jQuery, but I haven't found the right plugin.  </p>
  
  <p>Here is the html code for the links and the dropdown menu:  </p>
  
  <pre><code>&lt;div class="left_links"&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(1)"&gt;What is It?&lt;/button&gt;&lt;/div&gt;
  
  &lt;div class="C1"&gt;&lt;br&gt;
  &lt;div class="dropdown"&gt;
  &lt;button class="button_01" onmouseover="ShowText(5)"&gt;How fast is It? &lt;/button&gt;
  &lt;div class="dropdown-content"&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(101)"&gt;Sub_Link 01&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(102)"&gt;Sub_Link 02&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(103)"&gt;Sub_Link 03&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(104)"&gt;Sub_Link 04&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(105)"&gt;Sub_Link 05&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(106)"&gt;Sub_Link 06&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(107)"&gt;Sub_Link 07&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(108)"&gt;Sub_Link 08&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(109)"&gt;Sub_Link 09&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(110)"&gt;Sub_Link 10&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(111)"&gt;Sub_Link 11&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(112)"&gt;Sub_Link 12&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(113)"&gt;Sub_Link 13&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(114)"&gt;Sub_Link 14&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(115)"&gt;Sub_Link 15&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(116)"&gt;Sub_Link 16&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(117)"&gt;Sub_Link 17&lt;/button&gt;&lt;/div&gt;
     &lt;div class="C1"&gt;&lt;button class="button_dropdown" onclick="ShowText(118)"&gt;Sub_Link 18&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br&gt;&lt;br&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(2)"&gt;How does It work?&lt;/button&gt;&lt;/div&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(3)"&gt;Pricing&lt;/button&gt;&lt;/div&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(4)"&gt;Support&lt;/button&gt;&lt;/div&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(5)"&gt;FAQs&lt;/button&gt;&lt;/div&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(6)"&gt;Documentation&lt;/button&gt;&lt;/div&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(7)"&gt;Terms of Service&lt;/button&gt;&lt;/div&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(8)"&gt;Privacy&lt;/button&gt;&lt;/div&gt;
  &lt;div class="C1"&gt;&lt;br&gt;&lt;button class="button_01" onmouseover="ShowText(13)"&gt;About It&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css code for the links and the dropdown menu:  </p>
  
  <pre><code>.dropdown {
      position: absolute;
      z-index: 100;
      display: inline-block;
      overflow: hidden;
  }
  
  .dropdown-content {
      display: block;
      background-color: rgb(105,105,105);
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      border-radius: 15px;
      margin-left: 40px;
      margin-top: 0px;
      font-family: camphorW04-Thin,calibri,arial;
      font-size: 16pt;
      max-height: 30%;
  }
  
  .button_dropdown {
      background-color: rgb(105,105,105);
      border: none;
      color: #DBDBDB;
      font-family: camphorW04-Thin,calibri,arial;
      font-size: 12pt;
      text-align: left;
      text-decoration: none;
      cursor: ptr;
  }
  
  .button_dropdown:hover {color: white;}.left_links {
      grid-column: 5 / 20;
      grid-row: 5 / 15;
      text-align: left;
  }
  
  .C1{
      color:#DBDBDB;
      font-family: sans-serif;
      font-size: 14pt;
      text-indent: 0px;
      width: auto;
      margin: auto;
  }
  
  .button_01 {
      background-color: #555555;
      border: none;
      color: rgb(255,255,255);
      text-align: left;
      text-decoration: none;
      font-size: 12pt;
      cursor: pointer;
  }
  
  .button_01:hover { color: white;}
  </code></pre>
  
  <p>So to sum it up, my question is:  what jQuery plugin (or css or JavaScript) can I use to make the dropdown submenu disappear on mouseover of any of the main links?  I want the menu to remain fixed in place after it appears until a mouseover event.  </p>
  
  <p>Thanks for any ideas on this.  Screenshot is below.  </p>
  
  <p><a href="https://i.stack.imgur.com/xih49.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xih49.png" alt="enter image description here"></a></p>