드롭다운메뉴 채택완료

아래는 소스입니다. 잘 사용되어지고 있습니다.

다만, 마우스 올리면 하위 메뉴가 나오고 마우스가 떠나면 하위 메뉴가 사라집니다.

마우스가 떠날때 하위 메뉴가 3초 정도 있다 사라지게 하려면 어떻게 해야 할까요?

그리고 부드럽게 하위 메뉴가 나오고 부드럽게 사라지게도 가능한가요?

$('ul li:has(ul)').addClass('has-submenu');

$('ul li ul').addClass('sub-menu');

$('ul.dropdown li').hover(function () {

    $(this).addClass('hover');

}, function () {

    $(this).removeClass('hover');

});

var $menu = $('#menu'), $menulink = $('#spinner-form'), $search = $('#search'), $search_box = $('.search_box'), $menuTrigger = $('.has-submenu > a');

$menulink.click(function (e) {

    $menulink.toggleClass('active');

    $menu.toggleClass('active');

    if ($search.hasClass('active')) {

        $('.menu.active').css('padding-top', '50px');

    }

});

$search.click(function (e) {

    e.preventDefault();

    $search_box.toggleClass('active');

});

$menuTrigger.click(function (e) {

    e.preventDefault();

    var t = $(this);

    t.toggleClass('active').next('ul').toggleClass('active');

});

$('ul li:has(ul)');

$(function () {

    var e = $(document).scrollTop();

    var t = $('.nav_wrapper').outerHeight();

    $(window).scroll(function () {

        var n = $(document).scrollTop();

        if ($(document).scrollTop() >= 50) {

            $('.nav_wrapper').css('position', 'fixed');

        } else {

            $('.nav_wrapper').css('position', 'fixed');

        }

        if (n > t) {

            $('.nav_wrapper').addClass('scroll');

        } else {

            $('.nav_wrapper').removeClass('scroll');

        }

        if (n > e) {

            $('.nav_wrapper').removeClass('no-scroll');

        } else {

            $('.nav_wrapper').addClass('no-scroll');

        }

        e = $(document).scrollTop();

    });

});