Here is a real life working example of doing a nested dropdown menu with jQuery. Interesting? Yes of course it is…

Html:

  1. <ul id="nav"> 
  2.   <li><a href="#">menu item 1</a>
  3.     <ul>
  4.       <li><a href="#">sub menu item 1</a>
  5.         <ul>
  6.           <li><a href="#">sub sub menu item 1</a></li>
  7.           <li><a href="#">sub sub menu item 2</a></li>
  8.           <li><a href="#">sub sub menu item 3</a></li>
  9.           <li><a href="#">sub sub menu item 4</a></li>
  10.         </ul>
  11.       </li>
  12.     </ul>
  13.   </li>
  14. </ul>

Javascript (jquery):

  1. $(document).ready(function() {
  2.   $(‘ul#nav > li’).hover(function() {
  3.     $(‘ul:first’, this).show();
  4.   },
  5.   function() {
  6.     $(‘ul:first’, this).hide();
  7.   });
  8.  
  9.   $(‘ul#nav li li’).hover(function() {
  10.     $(‘ul:first’, this).each(function() {
  11.       $(this).css(‘top’, $(this).parent().position().top );
  12.       $(this).css(‘left’, $(this).parent().position().left + $(this).parent().width() );
  13.       $(this).show();
  14.     });
  15.   },
  16.   function() {
  17.     $(‘ul:first’, this).hide();
  18.   });
  19. });

Enjoy, see my working full example at the labs…