title: jQuery menu on hover open submenu
body: <p>I am trying to design something like the followingL</p>
  
  <pre><code>&lt;ul class="top"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Menu2&lt;/a&gt;
      &lt;ul class="sub"&gt;
        &lt;li&gt;&lt;a href="#"&gt;SubMenu1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;SubMenu2&lt;/a&gt;
          &lt;ul class="subsub"&gt;
            &lt;li&gt;&lt;a href="#"&gt;SubSubMenu1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;SubSubMenu2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;SubMenu3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Menu3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And my idea is that if the Node has subNodes, then the submenu will open. So in this instance, if the user hovers on Menu2, the SubMenu1, SubMenu2, and SubMenu3 will appear, and if the user hovers on SubMenu2, SubSubMenu1, SubSubMenu2 will appear.</p>
  
  <p>I have the following jQuery at the moment:</p>
  
  <pre><code>$(document).ready(function () {
    $("ul.top li").hover(function () { //When trigger is hovered...
      if ($("ul.top li").hasClass("sub")) {
        $(this).parent().find("ul.sub").slideDown('fast').show();
        $(this).parent().hover(function () {}, function () {
          $(this).parent().find("ul.sub").slideUp('slow');
        });
      }
    });
  });
  </code></pre>
  
  <p>However when I hover on Menu1, the submenus for Menu 2 are still opening.</p>
  
  <p>Any help will be very much appreciated!</p>