create jquery dropdown menu

Question

This is my fiddle I have a hard time to create a dropdown menus with the help of jquery.

$("a#SHOP").hover(function () {
            $("ul#test").fadeIn();
        }, function () {
            window.setTimeout(function () {
                $("ul#test").fadeOut();
            }, 500);
        });

I am looking for submenus should be visible on hover?

Answer 1

You better user slideUp() / slideDown(), and your timeout is useless :

$("#SHOP0").hover(function () {
    $("ul#test").slideDown();
}, function () {
    $("ul#test").stop().slideUp();
});

Demo : http://jsfiddle.net/Akaryatrh/LLe77/1/

[Edit] Added stop() to avoid multiple animations chaining.

Answer 2

May be if you like to do this way:

$(".top-level li").hover(function () {
    $("ul#test", this).fadeIn();
}, function () {
    $("ul#test", this).delay(500).fadeOut();
});

Fiddle

What seemed to me that you want to show your submenus, this will work for other li elems also if they have child uls and also at the fadeout you need a half a second delay so you can use .delay(500) the way i suggested in the answer.

Answer 3

When you leave the #SHOP element to hover the #test element, you trigger the fade out. One solution is to put add the trigger to the #SHOP0 element, which is a parent of the submenu:

http://jsfiddle.net/bb3R2/

$("#SHOP0").hover(function () {
    $("#test").fadeIn();
}, function () {
    window.setTimeout(function () {
        $("#test").fadeOut();
    }, 500);
});