javascriptjquerycssdrop-down-menu

JQuery slide effects on drop down menu


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 compare 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();
});

Solution

  • $(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.net/QkbDg/1/