Javascript 在第一个元素丢失悬停后取消显示菜单

首先，我不擅长JavaScript，通常我使用的是“随时可用”的框架。这一次我不得不自己做些事情。
网站：
抱歉，它是波兰语的，所以当你在“PIŁKA NOŻNA”->“Buti PIłkarskie”上“悬停”时，一切都很好，但当你转到“PIłki”时，菜单就消失了。
我猜当“Butto Piłkarskie”失去“hover”时，菜单正在缩小，鼠标在菜单外。请告诉我如何修复此问题？

<ul class="nav">
   {% for gn in groupNodes %}
    <li class="nav-item">
    <a href="{{ gn.Url }}" data-id="{{ gn.Id }}" class="nav-link" id="nav-item_{{ gn.Name |Remove:' ' }}">
              {{gn.Name}}
                    </a>
                    <ul class="nav">
                        {% for gnn in gn.Nodes %}
                        <li class="nav-item"><a class="nav-link sub-link" data-id="{{ gnn.Id }}" href="{{ gnn.Url }}">{{ gnn.Name }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                {% endfor %}
            </ul>

前两个节点（“PIŁKA NOŻNA”->“Butto PIłkarskie”）就在液环中，如果您想更深入，就必须使用异步JS

        (function () {
    $(function () {
        $('header .primary-nav .categories-menu-container > ul > li > ul a').hover(
function () {
    var t = $(this), gId = ('' + t.data('id')).split(',')[1];
    if (gId && t.find('ol').length == 0) {
        $.get(null, { __action: 'Get/Groups', groupId: gId, languageId: __lngId }, function (d) {

            var obj = d.action.Object;
            if (obj.length) {
                var ol = $('<ol class="nav"></ol>');
                t.append(ol);
                $.each(obj, function (i, el) {
                    var a = $('<a class="nav-link sub-sub-link"></a>').attr('href', el.Url).text(el.Title);
                    ol.append(a);
                    a.wrap('<li class="nav-item"></li>')
                });
            }
        });
    }
    else t.find('ol').show();
},
function () {
    $(this).find('ol').hide();
}
);
    });
})(jQuery);

（函数（）{
$（函数（）{
$（'header.primary nav.categories menu container>ul>li>ula'）。悬停(
函数（）{
var t=$（this），gId=（''+t.data（'id'））.split（'，'）[1]；
if（gId&&t.find（'ol'）。长度==0）{
$.get（null，{uu操作：'get/Groups'，groupId:gId，languageId:{uu lngId}，函数（d）{
var obj=d.action.Object；
if（目标长度）{
var ol=$（''）；
t、 附加（ol）；
$。每个（obj，功能（i，el）{
var a=$（''）.attr（'href'，el.Url）.text（el.Title）；
ol.附加（a）；
a、 换行（“
”）
});
}
});
}
else t.find（'ol'）.show（）；
},
函数（）{
$（this.find（'ol'）.hide（）；
}
);
});
})（jQuery）；

之所以发生这种情况，是因为当您将光标从“buto Piłkarskie”移动时，

li

元素的悬停事件被删除。因此，它隐藏了内部元素，您的第二个菜单向上移动，所以再次丢失了主菜单的悬停事件

---

据我所知，您需要在单击时触发主菜单事件，或者需要添加一秒钟的延迟，以便用户可以移动到下一个菜单。

该问题是由于应用于“PIŁKA NOŻNA”选项卡内的

元素的

边距底部造成的，如下所示

header .primary-nav .categories-menu-container > ul > li > ul > li {
    padding: 0 20px;
    font-size: small;
    margin-bottom: 11px; <-- This results in removing the hover effect
}

header.primary导航类别菜单容器>ul>li>ul>li{
填充：0 20px；
字体大小：小；
页边距底部：11px；你能创建一个最小的示例吗？无论是在问题中的片段中还是在JS小提琴中？@NisargShah在问题中还没有这样做吗？你可以使用“示例”在最初的网站上。它就在那里，为什么我需要在fiddle中再次这样做？@TronComputers:您尝试过我在下面的ans中提供的解决方案吗？我已经在您的网站上检查过了。我不能在点击时这样做，因为客户应该能够选择此类别。您可以在隐藏下拉列表之前添加延迟。天哪！就是这样，但是…如果您刷新第一次页面仍然不起作用，但当你再次这样做时，一切正常。你必须为此更新css。此代码存在于你的main.css中。只需在那里搜索并删除它。它会起作用。这是主要原因。但是，我们必须检查是否有任何其他css在第一次导致它现在是main.css…如果你无法更改main.css，然后您可以编写jquery hover-enent代码，用于删除和添加悬停和弹出的边距顶部。但我在37分钟前更改了它
header .primary-nav .categories-menu-container > ul > li > ul > li {
    padding: 0 20px;
    font-size: small;
    margin-bottom: 11px; <-- This results in removing the hover effect
}