title: Menu sub menu hover
body: <p><strong>Description</strong>: I've built a menu which displays a sub-menu when the user hovers over the menu. (The menu uses jQuery). Also, the way my menu is set is that if a user hovers over a certain div on the menu, jQuery takes that div name and appends a sub-menu id, which tells jQuery which sub-menu div to display.</p>
  
  <p><strong>jQuery used:</strong></p>
  
  <pre><code>$(function() {
      $('#nav div').hover(function() {
          var menu_name = $(this).attr('id');   //gets current div id
          sub_menu_name = '.sub_' + menu_name;  //creates the sub menu that matches that div menu
          $(sub_menu_name).css('display', 'block');
      }, function () {
          $(sub_menu_name).css('display', 'none');
      });     
  });
  </code></pre>
  
  <p><strong>Jsfiddle link</strong>: Please view:</p>
  
  <p>[1]:<a href="http://jsfiddle.net/tech_noob/nXR5Y/1/" rel="nofollow">http://jsfiddle.net/tech_noob/nXR5Y/1/</a> to see all the code that I used for this menu.</p>
  
  <p><strong>Problem</strong>: When the user hovers away from the menu and try's to hover over the sub-menu, the sub-menu also disappears. I would like the sub-menu to stay in place if the user hovers over the sub-menu and disappear only if the user hovers away from either the sub-menu or moves to a new menu link. I would also like to preserve the code structure I used in the HTML if possible (For example, I've seen other menu's where the developer used the sub-menu as a child to the respective menu link parent).</p>
  
  <p>Side Note: the UI in my local host displays the sub-menus under their respective menu links, on jsfiddle, the sub-menus are off. Not sure exactly why but this is a minor issue.</p>