Javascript 菜单及；子菜单使用单独的div将两者悬停

我想我一整天都在想这个。不应该这么难

我有一个带有主菜单的div，它是带有子菜单的child。我最初的问题是想在屏幕上水平显示子菜单，而不是垂直显示，这样我就可以把它放在我想要的地方。现在我陷入了这样的困境，我想过度思考这种情况已经让我迷失了方向

我只想在将鼠标悬停在父菜单上后将子菜单与父菜单分开，然后只要您在父菜单或子菜单上，就将其保持不变，离开时将其淡出，将附加的子菜单放回父菜单。当将鼠标悬停在具有子菜单的父菜单上时，徽标将淡出，当子菜单淡出时，徽标将淡入。无论发生什么，它现在所做的都会在徽标中逐渐消失，当它在子菜单上悬停时，它真的会有问题，有时它在子菜单上悬停时也不会停留

如果有更好的方法来定位这一点，这样我就不必经历这场混乱，或者只是一个更好的方法，请指出它

    <script type="text/javascript">
    jQuery(document).ready(function($){
        var inEle = false;
        var hideTimer;

        $('.sub-menu li a').css('display', 'inline-block');

        // do hover on main menu
        $('.uk-navbar-nav li a').hover(
            function() {
                // reset everything on new hover
                clearTimeout(hideTimer);

                // fade in the spire logo
                $('.logoimgcontainer img').stop(true, true).fadeIn(2000);

                inEle = true;

                // save the id if there is one to hide
                var subID = $('body').children('ul[class*="sub-menu"]').attr('id');
                // find the ul submenu and put it back on the div in the main menu, remove the placeholder id
                $('body').children('ul[class*="sub-menu"]').appendTo($(this).parent().parent().find('div[id*="'+subID+'"]')).removeAttr('id');
                // fade out the ul submenu
                $(this).parent().parent().find('div[id*="'+subID+'"]').find('ul').fadeOut(100);
                // find the div holding the ul submenu and take out its placeholder id
                $(this).parent().parent().find('div[id*="'+subID+'"]').removeAttr('id');

                //show submenu
                if ($(this).parent().find('div').hasClass('uk-dropdown')) {             
                    $('.logoimgcontainer img').stop(true, true).fadeOut(150);
                    $(this).parent().find('div').find('ul').appendTo('body').css({
                        'display' : 'inline-block',
                        'position' : 'absolute',
                            'left' : '0',
                            'right' : '0',
                            'top' : '90px',
                        'margin' : 'auto',
                        'width' : '300px',
                        'text-align' : 'center',
                        'z-index' : '150'
                    }).attr('id', $(this).text());
                    $(this).parent().find('div').attr('id', $(this).text());
                    $(this).parent().find('div').find('ul').fadeIn(1000);
                }
            }, function() {
                // do nothing here mkay
            }
        );

        // do hover out on main menu
        $('.uk-navbar-nav li').hover(
            function() {
                // do nothing here k
            },function() {
                // check if this item has a submenu
                if ($(this).find('div').hasClass('uk-dropdown')) {
                    // clear out the timer
                    clearTimeout(hideTimer);

                    var aID = $(this).find('a').text();

                    // go ahead and set it not in sub since it hovered out here
                    inEle = false;

                    // reset the timer
                    hideTimer = setTimeout(function() {
                        // make sure its not in the submenu
                        if (!inEle) {
                        //var checkUL = $('ul[id*="'+aID+'"]');
                        //if (!checkUL.is(":hover")) {
                           // hideTimer = setTimeout(function() {
                                // fade in the spire logo
                                $('.logoimgcontainer img').stop(true, true).fadeIn(2000);

                                // find the ul submenu and put it back on the div in the main menu, remove the placeholder id
                                $('ul[id*="'+aID+'"]').appendTo('div[id*="'+aID+'"]').removeAttr('id');
                                // fade out the ul submenu
                                $(this).find('div[id*="'+aID+'"]').find('ul').fadeOut(500);
                                // find the div holding the ul submenu and take out its placeholder id
                                $(this).find('div[id*="'+aID+'"]').removeAttr('id');

                            //}, 1000);
                        }else clearTimeout(hideTimer);  // still in the sub menu, clear the timer, handle in submenu
                    }, 1000);
                }
            }
        );

        // do hover in the submenu
        $('.sub-menu').hover(
            function() {
                // set were in the submenu now
                inEle = true;

                // take out the timer for the main menu
                clearTimeout(hideTimer);
            }, function() {
                // dont need the timeout anymore, not in submenu or main menu item
                clearTimeout(hideTimer);

                var ulID = $(this).attr('id');

                // set were out of the submenu
                inEle = false;
                hideTimer = setTimeout(function() {
                    //var checkUL = $('.uk-navbar-nav li a:contains("'+ulID+'")');
                    //if (!checkUL.is(":hover")) {
                    if (!inEle) {
                        // fade in the spire logo
                        $('.logoimgcontainer img').stop(true, true).fadeIn(3000);

                        // find the ul submenu and put it back on the div in the main menu, remove the placeholder id
                        $('body').find('ul[id*="'+ulID+'"]').appendTo($('.uk-navbar-nav li').find('div[id*="'+ulID+'"]')).removeAttr('id');
                        // fade out the ul submenu
                        $('.uk-navbar-nav li').find('div[id*="'+ulID+'"]').find('ul').fadeOut(500);
                        // find the div holding the ul submenu and take out its placeholder id
                        $('body').find('div[id*="'+ulID+'"]').removeAttr('id');
                    }else clearTimeout(hideTimer);  // still in the sub menu, clear the timer, handle in submenu
                }, 1000);
            }
        );
    });
    </script>

jQuery（文档）.ready（函数（$）{
var inEle=假；
异烟肼；
$（'.sub-menu li a'）.css（'显示'，'内联块'）；
//不要将鼠标悬停在主菜单上
$（'.uk导航栏导航李a'）。悬停(
函数（）{
//在新的悬停状态下重置所有内容
clearTimeout（hideTimer）；
//淡入尖顶标志
$（'.logoimgcontainer img'）.stop（true，true）.fadeIn（2000）；
INLE=真；
//如果有要隐藏的id，请保存该id
var subID=$（'body'）.children（'ul[class*='sub-menu']）.attr（'id'）；
//找到ul子菜单并将其放回主菜单中的div，删除占位符id
$（'body'）.children（'ul[class*=“sub-menu”]'））.appendTo（$（this.parent（）.parent（）.find（'div[id*=“'+subID+'”））.removeAttr（'id'）；
//淡出ul子菜单
$（this）.parent（）.parent（）.find（'div[id*=“'+subID+'''“]）.find（'ul'）.fadeOut（100）；
//找到持有ul子菜单的div并取出其占位符id
$（this.parent（）.parent（）.find（'div[id*=“'+subID+''“]）.removeAttr（'id'）；
//显示子菜单
if（$（this.parent（）.find（'div'）.hasClass（'uk-dropdown'））{
$（'.logoimgcontainer img'）.stop（true，true）.fadeOut（150）；
$（this）.parent（）.find（'div'）.find（'ul'）.appendTo（'body'）.css({
“显示”：“内联块”，
'位置'：'绝对'，
“左”：“0”，
“右”：“0”，
“顶部”：“90px”，
“页边距”：“自动”，
“宽度”：“300px”，
“文本对齐”：“居中”，
“z索引”：“150”
}).attr（'id'，$（this.text（））；
$（this.parent（）.find（'div'）.attr（'id'，$（this.text（））；
$（this.parent（）.find（'div'）.find（'ul'）.fadeIn（1000）；
}
}，函数（）{
//在这里什么都不要做，好吗
}
);
//不要在主菜单上悬停
$（'.uk导航栏导航li'）。悬停(
函数（）{
//在这里什么都不要做，k
}，函数（）{
//检查此项是否有子菜单
if（$（this）.find（'div'）.hasClass（'uk-dropdown'））{
//清除计时器
clearTimeout（hideTimer）；
var-aID=$（this.find（'a'）.text（）；
//继续，不要在sub中设置它，因为它在这里悬停
INLE=假；
//重置计时器
hideTimer=setTimeout（函数（）{
//确保它不在子菜单中
如果（！INLE）{
//var checkUL=$（'ul[id*=“'+aID+'”）；
//如果（！checkUL.is（“：hover”））{
//hideTimer=setTimeout（函数（）{
//淡入尖顶标志
$（'.logoimgcontainer img'）.stop（true，true）.fadeIn（2000）；
//找到ul子菜单并将其放回主菜单中的div，删除占位符id
$（'ul[id*=“'+aID+'”）.appendTo（'div[id*=“'+aID+'”）.removeAttr（'id'）；
//淡出ul子菜单
$（this.find（'div[id*=“'+aID+'“]'））.find（'ul'）.fadeOut（500）；
//找到持有ul子菜单的div并取出其占位符id
$（this.find（'div[id*=“'+aID+''“]））.removeAttr（'id'）；
//}, 1000);
}else clearTimeout（hideTimer）；//仍在子菜单中，清除计时器，在子菜单中处理
}, 1000);
}
}
);
//不要在子菜单中悬停
$（“.子菜单”）。悬停(
函数（）{
//现在，设置在子菜单中
INLE=真；
//取出主菜单的计时器
clearTimeout（hideTimer）；
}，函数（）{
//不再需要超时，不在子菜单或主菜单项中
clearTimeout（hideTimer）；
var ulID=$（this.attr（'id'）；
//设置为从子菜单中删除
INLE=假；
hideTimer=setTimeout（函数（）{
//var checkUL=$（'.uk导航栏导航li a:contains（“+ulID+”））；
//如果（！checkUL.is（“：hover”））{
如果（！INLE）{
//逐渐消失在尖顶l