mouseout unwanted affect

mouseout unwanted affect

I'm trying to build a drop down menu and found mouseout is doing something I didn't expect it to. Here's the html:

<ul id='ddmenu'>
   <li>
      <a href='#'>Parent 1</a>
      <ul>
         <li><a href='#'>Link 1</a></li>
         <li><a href='#'>Link 2</a></li>
      </ul>
   </li>
   <li>
      <a href='#'>Parent 2</a>
   </li>
   <li>
      <a href='#'>Parent 3</a>
      <ul>
         <li><a href='#'>Link 1</a></li>
         <li><a href='#'>Link 2</a></li>
      </ul>
   </li>
</ul>



And the javascript:

$(document).ready(function(){
   $('#ddmenu').children('li').mouseover(function(){
      $(this).children('ul').show();
   });
   $('#ddmenu').children('li').mouseout(function(){
      alert('hi'); // For Debuging
      $(this).children('ul').hide();
   });
});



When you move your mouse over the parent list, it drops the menu below it as expected. But when you run the mouse over the dropped down menu, the mouseout() function executes even though the child list is within the parent 'li'. Is there a work around for this?