jQuery animate mouseover/mouseout keep drop menu visible

Question

I'm trying to make a basic drop down menu with animate and am running into the issue where I can't seem to figure out how to keep the dropdown part open until the mouse leaves. Is there an easy way to tell this to stay open? I know what I have is completely wrong regarding the .clickme mouseout function since it will unload the menu accordingly.

If anyone can help in this specific instance, I would be super grateful.

PREVIEW HERE http://cu3ed.com/ddmenu/

or below:

$(document).ready(function() {

$('.clickme').mouseover(function() {
    $('#slidebox').animate({
        top: '+=160'
    }, 200, 'easeOutQuad');
});

$('.clickme').mouseout(function(){
    $('#slidebox').animate({
        top: '-=160'
    }, 200, 'easeOutQuad')
});

});

I would like to keep this as simple and clean as possible. I know the CSS is all crazy but it's totally preliminary.

THANKS!!!

Answer 1

Check out jquery hoverIntent

Answer 2

This should get you going without any markup changes:

$('.clickme, #slidebox').hover(function() {
  $('#slidebox').stop().animate({ top: '30px' }, 200, 'easeOutQuad');
}, function() {
  $('#slidebox').stop().animate({ top: '-130px' }, 200, 'easeOutQuad');
});

Since your elements aren't parent/child related, easier to put absolute positions on the menu (it has 130px in the CSS anyway), so no reason not to use the fact it has an absolute position. Give it a shot, I tested against your site, seems to be the behavior I'd want in a menu.