title: Can't hover over jquery toggled submenu
body: <p>I built a menu with jquery, 4 category buttons on the top menu triggering 4 submenus below. It works fine, the submenus are appearing and changing when I hover over another button, but I can't hover over the submenu, it's dissappearing when I "leave" the trigger button.</p>
  
  <p><a href="https://jsfiddle.net/2zrjzdy3/" rel="nofollow">JSFiddle Example</a> (sorry for the messy code, I can't reproduce the entire composition in Fiddle, I copy-pasted the important parts and the issue is same on the site as seen on this example)</p>
  
  <p>This is the jquery for the submenu calls:
  ('active' and 'rotated' is for changing icons/rotating the text on the trigger buttons, these are triangles and I did some jquery fanciness to them, I hope it's still understandable)</p>
  
  <pre><code> $('.leisuremenu').hover(function () {
      $('.leisure_menu').toggleClass('show_menu');
      $('.luxury_menu').toggleClass('show_menu');
      $('.select-luxury').toggleClass('active');
      $('.select-corporate').toggleClass('rotated');
      $('.select-luxury').toggleClass('rotated');
  });
  $('.corporatemenu').hover(function () {
      $('.corporate_menu').toggleClass('show_menu');
      $('.luxury_menu').toggleClass('show_menu');
      $('.select-luxury').toggleClass('active');
      $('.select-luxury').toggleClass('rotated');
  });
  $('.vipmenu').hover(function () {
      $('.vip_menu').toggleClass('show_menu');
      $('.luxury_menu').toggleClass('show_menu');
      $('.select-luxury').toggleClass('active');
      $('.select-vip').toggleClass('rotated');
      $('.select-vip').toggleClass('active');
  });
  </code></pre>
  
  <p>In this example the 4th trigger button is active, the other 3 is triggering the other 3 submenu.</p>
  
  <p>How can I modify this to achieve the submenus staying in place when I hover over them AND it should be dissapearing when I leave the submenu or hover over another trigger button?</p>
  
  <p>(note: there is no space between the trigger triangles and the submenus, so I don't think it's a CSS issue)</p>
  
  <p>I've tried adding this but it didn't work:</p>
  
  <pre><code>        $('.vip_menu').hover(function () {
              $('.vip_menu').toggleClass('show_menu');
          });
          $('.corporate_menu').hover(function () {
              $('.corporate_menu').toggleClass('show_menu');
          });
          $('.leisure_menu').hover(function () {
              $('.leisure_menu').toggleClass('show_menu');
          });
  </code></pre>
  
  <p>Let me know if I need to clarify more details/code.</p>
  
  <p>Any help would be appriciated.</p>