Jquery drop down

Here is a jquery drop down i am trying to make: http://jsfiddle.net/qYMq4/2/

Basically i just want a div to drop down when a user mouses over a link and stay down unless i mouse away from the link or over the dropped down div and then away from the div. So it is almost like a standard drop down menu that you see in alot of website navigation, but this just has a bit开发者_如何学JAVA of animation so it doesn't appear instantly.

I'm finding it terribly difficult, as you can see it doesn't quite function correctly. Any adivce? Thanks for your input.

You can see a working demo of the following here.

I prefer mouseenter^[DOCS] and mouseleave^DOCS in this situation as it behaves better when hovering over children. I restructured your HTML so that the hover is over the parent div of the link, so that when you hover over the gray area that slides down it's not considered a mouseleave as follows:

<div class="mask-layer">
    <a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
    <div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>

I then restructured your Javascript to use .mask-layer for the hover events, and simplified the animation with slideUp^[DOCS] and slideDown^[DOCS] as follows:

$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
    $('.slidedown').slideDown(600);
}).mouseleave(function() {
    setTimeout(function() {
        $('.slidedown').slideUp(600);
    }, 200);
});

You can use the slideDown() and slideUp() methods - they're a littler easier to work with. You'll also want to use the windowSetTimeout. A lesser known feature is that it returns a number which will allow you to cancel the timeout. You can use that to keep the div open in the event the user scrolls down onto it. Some inspiration for this approach borrowed from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

$(document).ready(function() {
    $('.slidedown').hide();
    var timeout = 500;
    var closetimer = 0;

    $('a.top-link-cart, .slidedown').mouseover( function(){
        cancel_timer();
        $('.slidedown').slideDown(1000);
    });

    $('a.top-link-cart, .slidedown').mouseout( function(){
        closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
      });

function cancel_timer(){
 if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;
   }
 }
});

http://jsfiddle.net/P567S/7/

if you are looking for a click action dropdown menu here it is

//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();

});

//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});

hope it works for you..... !!