javascript - Javascript メニューのホバーの問題

Question

以前の Web 開発者が作成したクライアントの JavaScript メニューを編集しようとしています。私はJavascriptが得意ではありません。クライアントから、クリックではなく ROLLOVER でメニューの展開を展開するように依頼されました。そこで、.click を .hover に変更したところ、うまくいきました。問題は、マウスをメインの見出しからメニューの実際の拡張可能な領域に移動すると、メニューがフェード/非表示になることです。これは .mouseneter セクションに関係しているように感じますが、どうすればよいかわかりません。アイデア？

function fadeMenu(el) {
    var delayMenu = setTimeout(function () {
        $(el).fadeOut(300);
        $(el).prev('.dropdown-toggle').removeClass('dropdown-enabled').animate({
            backgroundColor: 'transparent',
            color: '#000000'
        }, 300, function () {
            $(this).css({
                color: '',
                backgroundColor: ''
            });
        });
    }, 500);

    el.data('delayMenu', delayMenu);
}

$(document).ready(function () {
    $('a.dropdown-toggle').click(function () {
        var menu = $(this).next('.dropdown-menu');
        var link = $(this).parent('li');
        var otherMenus = $('.dropdown-menu').not(menu);
        var otherToggles = $('.dropdown-toggle').not($(this));
        var toggle = $(this);
        var toColor = '';

        if ($(menu).is(":visible")) {
            if ($(link).is(":hover")) {
                toColor = '#ff7e00';
            } else {
                toColor = '#000000';
            }

            $(menu).fadeOut(300);
            $(toggle).removeClass('dropdown-    enabled').stop().animate({
                backgroundColor: 'transparent',
                color: toColor
            }, 300, function () {
                $(this).css({
                    color: '',
                    backgroundColor: ''
                });
            });
        } else {
            if ($(otherMenus).is(':visible')) {
                $(otherMenus).fadeOut(300);
            }

            $(toggle).stop().animate({
                backgroundColor: '#1f1f1f',
                color: '#ffffff'
            }, 300).addClass('dropdown-enabled');
            $(menu).fadeIn(300);

            $(otherToggles).stop().animate({
                backgroundColor: 'transparent',
                color: '#000000'
            }, 300, function () {
                $(otherToggles).css({
                    color: '',
                    backgroundColor: ''
                });
            });

        }

        return false;
    });

    $('.dropdown-menu').mouseenter(function () {
        clearTimeout($(this).data('delayMenu'));
    }).mouseleave(function () {
        fadeMenu($(this));
    });

    $('.dropdown-toggle').mouseenter(function () {
        clearTimeout($(this).next('.dropdown-menu').data('delayMenu'));
    }).mouseleave(function () {
        fadeMenu($(this).next('.dropdown-menu'));
    });
});