jQuery drop down menu item to go back up when not hovering on it

I have managed to get my menu items to drop down on hover but once they are down, they stay down. How can I get it to go back to hidden when I am not hovering on the item?

<script type="text/javascript"> 
$(document).ready(function(){
    $(".downservices").hover(function(){
        $(".servicesdropped").slideDown("fast");
        
        
        
    });
});
</script>

The Menu:

<ul>
        <li><a href="/">Home</a></li>
        <li><a href="/buy-ads">Buy Ads</a></li>
        <li class="downservices"><a href="#">Categories</a></li>
    <div class="servicesdropped">
    <ul class="middle">
    
        <li><a href="#">Arts & Entertainment</a></li>                                          
<li><a href="#">Automotive</a></li> 
<li><a href="#">Business &amp; Services</a></li>                                  
<li><a href="#">Community & Social</a></li> 
<li><a href="#">Construction & Contractors</a></li>                                 
<li><a href="#">Designing</a></li> 
<li><a href="#">Electronics</a></li>                        
<li><a href="#">Education</a></li>   
<li><a href="#">Finance</a></li>                                                 
<li><a href="#">Food & Dining</a></li> 
<li><a href="#">Government & legal</a></li>                                               
  
        
        
    </ul>
    <ul class="middle">
    <li><a href="#">Health & Fitness</a></li> 
<li><a href="#">Home & Garden</a></li>                                                
<li><a href="#">Industry & Agriculture</a></li> 
<li><a href="#">Media & Communications</a></li> 
    <li><a href="#">Medical & Medicine</a></li> 
<li><a href="#">Personal Care & Services</a></li>                                  开发者_Python百科    
<li><a href="#">Real Estate</a></li> 
<li><a href="#">Shopping</a></li>                              
<li><a href="#">Sports & Recreation Activities</a></li> 
<li><a href="#">Travel</a></li>   




                            
    </ul>
    
    </div>
    
    <li class="downservices2"><a href="#">Quick Links</a></li>
    <div class="servicesdropped2">
    
    <ul class="middle">
    <li><a href="#">Attorneys defense</a></li>
<li><a href="#">Banks</a></li>
<li><a href="#">Broadcasting</a></li>
<li><a href="#">Charity & networking</a></li>
<li><a href="#">Clubs</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Cosmetics</a></li>
<li><a href="#">Educational services</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Home & building services</a></li>
<li><a href="#">Imports and exports</a></li>
    </ul>
    
    
    <ul class="middle">
    <li><a href="#">Improvement & supplies</a></li>
<li><a href="#">Investments and rentals</a></li>
<li><a href="#">Life style design</a></li>
<li><a href="#">Manufacture & dealers</a></li>
<li><a href="#">Name Brands</a></li>
<li><a href="#">Physicians & medical centers</a></li>
<li><a href="#">Restaurants</a></li>
<li><a href="#">Sports clubs</a></li>
<li><a href="#">Tv's & computers</a></li>
<li><a href="#">Vacation</a></li>
    </ul>
    
    </div>

        <li><a href="/faq">Faq</a></li>
        
        <li><a href="/contact">Contact Us</a></li>
    </ul>

Hover can accept two handler functions, one for mouseenter, and one for mouseleave Just add the handlerOut function like so,

Live Demo

$(".downservices").hover(
        function(){$(".servicesdropped").slideDown("fast");},
        function(){$(".servicesdropped").slideUp("fast");}
);

Updated When sub items are not direct children.

Live Demo 2

$(".servicesdropped").bind('mouseleave', function(){$(this).slideUp("fast");});

$(".downservices").mouseover(
        function(){$(".servicesdropped").slideDown("fast");}
);

Hover Reference

You need to finish the signature hover( handlerIn(eventObject), handlerOut(eventObject) ) Put a function for .slideUp() in the handerOut()

<script type="text/javascript"> 
$(document).ready(function(){
    $(".downservices").hover(
        function(){ $(".servicesdropped").slideDown("fast");}
        function(){ $(".servicesdropped").slideUp("fast");}
    );
});
</script>

try

$(document).ready(function(){
    $(".downservices").toggle(function(){
        $(".servicesdropped").slideDown("fast");
    });
});

OR

$(document).ready(function(){
    $(".downservices").hover(function(){
        $(".servicesdropped").slideDown("fast");
    }, function(){
        $(".servicesdropped").slideUp("fast"););
});

May be slideToggle() can helps u too :)

Hover has both an in, and out callback. Give this a try

$(".downservices").hover(
    function(){ $(".servicesdropped").slideDown("fast"); },
    function(){ $(".servicesdropped").slideUp("fast"); },
});