最初の要素がホバーを失った後にメニューが消える

Question

まずはJavaScriptがうまくいかず、通常は "ready to go"フレームワークを使用しています。今回私は自分で何かをしなければならなかった。
ウェブサイト：http://nordica.optimo365.pl
申し訳ありませんが、それはポーランド語でだ、そのとき「PIŁKANOŻNA」のあなた「ホバー」 - >「ブチルPiłkarskieは、」すべてのものは結構ですが、あなたがダウンして「Piłki」へ行くときにメニューがdisapearingされます。
「ButyPiłkarskie」が「ホバー」を失ったとき、メニューが縮小していて、マウスがメニューの外にあるときは、私は推測しています。これを修正する方法を教えてください？

<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> 

CSS

@media (min-width: 1025px) { 
    header .primary-nav .categories-menu-container > ul > li:hover > ul { 
    display: block; 
    padding-top: 10px; 
    min-width: 200px; 
    width: 100%; 
    margin-left:-35px; 
    box-shadow:0px 0px 0.2px 0px #424242; 
    } 
} 

第2のノード（ "PIŁKANOŻNA" - > "ブチルPiłkarskie"）あなたがより深く行きたいならば、あなたは非同期JSを使用する必要があり、ちょうど液体ループでありますあなたは「ブチルPiłkarskie」からカーソルを移動すると、削除されたばかりli要素のイベントを置くため

 (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); 

Answer 1

この問題は、「PIŁKANOŻNA」タブ内の<li>要素に適用されたmargin-bottomが原因で発生します。あなたは「ブチルPiłkarskie」<li>を検査し、margin-bottom: 11px;を削除した場合、予想通り

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 
} 

それが動作します。

ご希望の場合はこちらをご覧ください。

Answer 2

それは起こっています。したがって、内側の要素が隠れていて、2番目のメニューが上に移動するので、再びメインメニューのホバーイベントが失われます。

私が知っている限り、メインメニューのイベントをクリックするか、1秒の遅延を追加する必要があるので、次のメニューに移動できます。