jQuery Dropdown

I've been able to make a jQuery drop down, however, I can't make it stay expanded when one of the child links is rolled over.

Code:

<li>
    <a  onmouseover="$('.dropdown-1').slideDown('medium');" href=开发者_JAVA百科"/hosting">Why Veoloo</a>
      <ul class="dropdown-1">
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">The Reasons (15)</a></li> 
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Customer Testimonials</a></li>
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Our Support Scope</a></li>
      </ul>
    </li>

---

html:

<li id="menu">
  <a href="/hosting">Why Veoloo</a>
  <ul class="dropdown-1">
    <li><a href="#">The Reasons (15)</a></li> 
    <li><a href="#">Customer Testimonials</a></li>
    <li><a href="#">Our Support Scope</a></li>
  </ul>
</li>

javascript :

$(function(){
  $('.dropdown-1').hide();
  $('#menu').hover(function(){
        $('.dropdown-1').slideDown('medium');
  }, function(){
        $('.dropdown-1').slideUp('medium');
  });
})

example:

http://jsfiddle.net/gurPn/1/

[EDIT]: Updated to use hover method (jQuery) and trigger the hove off of the parent container (this allows the mouseleave event to be captured only on the container giving the desired drop down effect).