title: DropDown multilevel menu with hover
body: <p>The following is basic working DropDown menu, child’s appear on hover the parent text.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function () { 
      $('#nav ul').hide();
  
      $('#nav li &gt; a').hover(
        function () {$('ul', this.parentNode).stop().slideDown(100);}
      );
  
     $('#nav li').hover(null, 
        function (e) {$('ul', this.parentNode).stop().slideUp(100);}
     );
  
    }
    );
  &lt;/script&gt;
  
  &lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent A&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sub a1&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item a1.1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item a1.2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item a1.3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt; 
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sub a2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sub a3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent B&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sub b1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sub b2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sub b3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt; 
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I’ve added above a third level under submenu, but it's not opening and closing the last level.</p>
  
  <p>I’m not sure in this case if I need to change the html code or is it only the JavaScript that needs to be changed so that the script will work properly.</p>