title: Jquery code for multi-level dropdown navigation menu
body: <p>All,</p>
  
  <p>I am new to JQuery and trying to write JQuery code to create a multi level dropdown menu. The HTML looks like below:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
     &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;
         &lt;ul class="submenu"&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Link 1.1&lt;/a&gt;
             &lt;ul class="submenu"&gt;
                &lt;li&gt;&lt;a href="#"&gt; Sub Link 1.1.1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt; Sub Link 1.1.2&lt;/a&gt;&lt;/li&gt; 
             &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Link 1.2&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Link 1.3&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;
         &lt;ul class="submenu"&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Link 2.1&lt;/a&gt;
             &lt;ul class="submenu"&gt;
                &lt;li&gt;&lt;a href="#"&gt; Sub Link 2.1.1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt; Sub Link 2.1.2&lt;/a&gt;&lt;/li&gt; 
             &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;&lt;a href="#"&gt;Sub Link 2.2&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The JQuery code I got so far is as under, but it's not opening and closing the submenus.How can I make it work?</p>
  
  <pre><code>$(document).ready(function () {
      $('#ul.menu &gt; li').hover(function () { $('ul:first', this).show(); },
                             function () { $('ul:first', this).hide(); }
      );
      $('#ul.menu li li').hover(function () {
          $('ul:first', this).each(function () {
              var p = $(this).parent();
              $(this).css('top', p.position().top)
                     .css('left', p.position().left + p.width())
                     .show();
          });},
          function () { $('ul:first', this).hide(); }
      );
  });
  </code></pre>