title: Dropdown menu 4 level depth
body: <p>I'm a javascript noob and try to make the below menu wirking corectly with 4 level depth. With 3 level it work corectly, but with 4 level, when I put the mous on "Dupa tara" it show the countries and "Cramele Recas" too. Can someone help me to make it work corectly?
  Here is the code: 
  HTML</p>
  
  <pre><code>&lt;div id="nav" class="group elegant" style="width:720px;"&gt;
                              &lt;ul id="menu-principal" class="level-1"&gt;&lt;li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-114"&gt;&lt;a href="http://selectedwine.ro/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"&gt;&lt;a href="http://selectedwine.ro/despre-vin/"&gt;Despre noi&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"&gt;&lt;a href="http://selectedwine.ro/vinul/"&gt;Vinul&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"&gt;&lt;a href="http://selectedwine.ro/arhiva/"&gt;Arhiva&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"&gt;&lt;a href="http://selectedwine.ro/products-page/"&gt;Enoteca&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li id="menu-item-141" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-141"&gt;&lt;a href="http://selectedwine.ro/products-page/product-category/dupa-tara/"&gt;Dupa tara&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
          &lt;li id="menu-item-142" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-142"&gt;&lt;a href="http://selectedwine.ro/products-page/product-category/franta/"&gt;Franta&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu-item-143" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-143"&gt;&lt;a href="http://selectedwine.ro/products-page/product-category/argentina/"&gt;Argentina&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu-item-144" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-144"&gt;&lt;a href="http://selectedwine.ro/products-page/product-category/italia/"&gt;Italia&lt;/a&gt;&lt;/li&gt;
  
          &lt;li id="menu-item-203" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-203"&gt;&lt;a href="http://selectedwine.ro/products-page/product-category/romania/"&gt;Romania&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li id="menu-item-215" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-215"&gt;&lt;a href="http://selectedwine.ro/products-page/product-category/cramele-recas/"&gt;Cramele Recas&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and  JS</p>
  
  <pre><code> $('#nav li, ul.sub-menu, ul.children').each(function(){
          n = $('ul.sub-menu:not(ul.sub-menu li &gt; ul.sub-menu), ul.children:not(ul.children li &gt; ul.children)', this).length;
  
          if(n) $(this).addClass('parent');
      });
  
      $('#nav ul &gt; li').hover(
          function()
          {
              $('ul.sub-menu:not(ul.sub-menu li &gt; ul.sub-menu), ul.children:not(ul.children li &gt; ul.children)', this).stop(true, true).fadeIn(300);    
          },
  
          function()
          {
              $('ul.sub-menu:not(ul.sub-menu li &gt; ul.sub-menu), ul.children:not(ul.children li &gt; ul.children)', this).fadeOut(300);    
          }
      );              
  
      $('#nav ul &gt; li').each(function(){
          if( $('ul', this).length &gt; 0 )
              $(this).children('a').append('&lt;span class="sf-sub-indicator"&gt; &amp;raquo;&lt;/span&gt;')
      }); 
  
      $('#nav li:not(.megamenu) ul.sub-menu li, #nav li:not(.megamenu) ul.children li').hover(
          function()
          {
              var options;
  
              winWidth = $(document).width();
  
              subMenuWidth = $(this).parent().outerWidth();
              space = $(this).offset().left + subMenuWidth * 2;
  
              if(space &lt; winWidth) options = {left:subMenuWidth-20};
              else options = {left:subMenuWidth*-1};
  
              $('ul.sub-menu, ul.children', this).hide().css(options).stop(true, true).fadeIn(300);
          },
  
          function()
          {
              $('ul.sub-menu, ul.children', this).fadeOut(300);
          }
      );
  </code></pre>