jquery hover on one ul at a time

Question

I have my drop menu sliding down nicely but it does it on all ul's in my navigation. I need it to drop the menu for only the hovered ul.I tried to use the "this" element but don't know enough about jQuery to get it to work. Anyone???

Here's the HTML page (edited for simplicity)

<div id="main-nav">
   <ul><h1><a href="index.cfm">About Us</a></h1>
       <ul>
         <li><a href="#">Our Management</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
   </ul>
  <ul><h1><a href="index.cfm">About Us</a></h1>
       <ul>
         <li><a href="#">Our Management</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
   </ul>
</div>

Heres the jQuery:

$(document).ready(function() {
  $("#main-nav ul ul").hide();
  $(this.id+'ul').hover(function() {
    $('ul ul').slideDown(200);
  }, function() {
    $('ul ul').slideUp(200);
  });
});

Answer 1

$('ul ul') will always fetch all ul children of all uls, regardless of context.

You probably want to replace instances of $('ul ul') with $(this).children('ul').

Answer 2

First html fix, children of <ul> should be <li>:

<div id="main-nav">
   <ul>
     <li><h1><a href="index.cfm">About Us</a></h1>
       <ul>
         <li><a href="#">Our Management</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
     </li>
   </ul>
  <ul>
    <li><h1><a href="index.cfm">About Us</a></h1>
       <ul>
         <li><a href="#">Our Management</a></li>
         <li><a href="#">In The Community</a></li>
       </ul>
     </li>
   </ul>
</div>

Then the jQuery:

$(document).ready(function() {
  $("#main-nav ul ul").hide();
  $("#main-nav>ul>li").hover(function() {
    $(this).children('ul').slideDown(200);
  }, function() {
    $(this).children('ul').slideUp(200);
  });
});

Answer 3

I kept playing around and found this to work in IE

$(document).ready(function() { $("#main-nav ul ul").hide();

$("ul", this).hover(function() {
     $("ul", this).slideDown(200);
    }, function() {
     $("ul", this).slideUp(200);
});

});