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?
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:
$("#SHOP0").hover(function () {
$("#test").fadeIn();
}, function () {
window.setTimeout(function () {
$("#test").fadeOut();
}, 500);
});
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();
});
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.
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.
