jQuery mega menu slide effect

Question

Currently my jQuery code below opens and closes a submenu when its parent is hovered. But my only problem is when I mouse over another top level item the opened submenu starts to close and the submenu for the item I am now hovered starts to slide down, so there are partially 2 submenu's open.

How could I achieve it so that the new submenu would only open only after the previous one has finished closing? The effect I would want ideally would be one like this plugin here

$('.main-menu > ul > li').hover(function () {
        $(this).find('.sub-menu').slideDown('slow');
    }, function () {
        $(this).find('.sub-menu').stop(true, true).slideUp('slow');
    });

Answer 1

.stop( [clearQueue ] [, jumpToEnd ] )

var sub_menu = $('.main-menu .sub-menu');//select all sub menus
$('.main-menu > ul > li').hover(function () {
    sub_menu.stop(true, true); //use stop on all submenus
    $(this).find('.sub-menu').slideDown('slow');
}, function () {
    sub_menu.stop(true, true);//use stop on all submenus
    $(this).find('.sub-menu').slideUp('slow');
});