I created jquery dropdown menu like this. I want to add slide effect on drop down menu. At the same time if I am placing my mouse over my menu tab the sub menu was opened now it is looking like one step up pare to the menu tab. I need slide like this. I here added my script.

function mainmenu() {
    jQuery(" #na1").hover(function () {
//alert("hai-2");
        jQuery(this).find('#content1').slideDown("fast");
    }, function () {
        jQuery(this).find('#content1').slideUp("fast");
    });
}

$(document).ready(function () {
    mainmenu();
});

I created jquery dropdown menu like this. I want to add slide effect on drop down menu. At the same time if I am placing my mouse over my menu tab the sub menu was opened now it is looking like one step up pare to the menu tab. I need slide like this. I here added my script.

function mainmenu() {
    jQuery(" #na1").hover(function () {
//alert("hai-2");
        jQuery(this).find('#content1').slideDown("fast");
    }, function () {
        jQuery(this).find('#content1').slideUp("fast");
    });
}

$(document).ready(function () {
    mainmenu();
});

• javascript
• jquery
• css
• drop-down-menu

• could you be more clear about what you are expecting ? – dreamweiver Commented Apr 9, 2014 at 7:32
• I think this site provides the solution: onextrapixel./2011/06/03/… – jyotesh Commented Apr 9, 2014 at 7:36

4 Answers 4

$(document).ready(function () {
    $("#na ul li").hover(function () {
         $(this).siblings().find('ul').slideUp(400);
         $(this).find('ul').slideDown(400);        
    }, function () {
       $(this).find('ul').slideUp(400);
    });
});

Demo:

http://jsfiddle/QkbDg/1/

Try this

$(document).ready(function () {
    jQuery("#na ul li a").hover(function () {
        jQuery(this).next('ul').slideDown(350);
    }, function () {
        jQuery(this).next('ul').slideUp(350);
    });
});

DEMO

Try this:

function mainmenu(){
    jQuery(" #na1").hover(function(){
        jQuery(this).find('#content1').stop().slideDown("fast");
    },function(){
        jQuery(this).find('#content1').stop().slideUp("fast");
    });
}

$(document).ready(function()
{
    mainmenu();
}); 

Try this

function mainmenu(){
jQuery(".topm").hover(function(){
//alert("hai-2");
jQuery(this).find('.content').stop().slideDown("fast")
},function(){
jQuery(this).find('.content').stop().slideUp("fast");
});
}

$(document).ready(function()
{
mainmenu();
}); 

Demo : here