title: Multi Level Drop Down Menu Using Jquery
body: <p>I want to design a multilevel menu using jQuery. 
  I have already written some code .You can see the demo <a href="http://jsfiddle.net/24ZvL/" rel="nofollow">here</a> .
  All this works fine. But I want to make multilevel drop down menus dynamically.</p>
  
  <p><strong>Script</strong></p>
  
  <pre><code>$('ul#menu &gt; li').hover(function(){
      //$('#drop' , this).css('display','block');
       $('.drop' , this).delay(20).slideDown(200);
  }, function(){
   $('.drop' , this).delay(20).slideUp(200);
  });​
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
          &lt;ul class="drop"&gt;
              &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
  
      &lt;li&gt;&lt;a href="#"&gt;about&lt;/a&gt;
          &lt;ul class="drop"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;​
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul#menu
  {
      margin:0;
      padding:0;
  }
  ul#menu &gt; li
  {
      list-style:none;
      float:left;
      margin:0;
      padding:0;
      position:relative;
  }
  ul#menu a
  {
      text-decoration:none;
      color:#fff;
      background:red;
      display:block;
      padding:10px;
  }
  ul#menu &gt; li ul.drop
  {
      margin:0;
      padding:0;
      width:150px;
      position:absolute;
      display:none;
  }
  ul#menu &gt; li ul.drop ul
  {
      margin:0;
      padding:0;
      width:150px;
      position:absolute;
      display:none;
      left:150px;
      top:0;
  }
  ul#menu &gt; li ul li
  {
      margin:0;
      padding:0;
      list-style:none;
      position:relative;
  }​
  </code></pre>