title: Show submenu's submenu on submenu hover only
body: <p>I am trying to show the submenu on hovering the menus. I have succeeded in submenu level 1. But when I go to submenu level 2(ie, submenu of submenu) it is not working. I want to show the level 2 submenu only on hovering the level 1 submenu. Following is the code that I have tried</p>
  
  <pre><code>&lt;ul class="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
          &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Capabilities&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Approach&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#"&gt;Careers&lt;/a&gt;
          &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Working With Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Work Culture&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Benefits&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Following is the jQuery</p>
  
  <pre><code>$('ul.submenu').hide();
  $('ul.nav &gt; li').hover(function () {
  if ($(this).find('ul.submenu').length &gt; 0) {
      $(this).find('ul.submenu').stop().slideDown('slow');
  }
  },function () {
      if ($(this).find('ul.submenu').length &gt; 0) {
          $(this).find('ul.submenu').stop().slideUp('slow');
      }
  });
  </code></pre>
  
  <p>Please find the Fiddle Here : <a href="http://jsfiddle.net/Midhun28/RbY83/1/" rel="nofollow">http://jsfiddle.net/Midhun28/RbY83/1/</a></p>