Rozwijane menu znika jeśli najedzie się na drugi element na liście

Witam.
Piszę z zapytaniem co poprawić, aby działało jak trzeba. W większości przypadków korzystam z gotowych frameworków do JS oraz CSS. Tym razem trzeba było zrobić coś samemu.
Adres strony to http://nordica.optimo365.pl
Problem zaczyna się w elemencie "PIŁKA NOŻNA" -> "Buty Piłkarskie" - jeśli to menu mam rozwinięte to elementu poniżej ("Piłki") już nie mogę rozwinąć, ponieważ całe menu znika.
Generowanie menu z zastosowaniem składni Liquid (nie mój wymysł tylko firmy Comarch i ich E-Sklepu)

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

Jak widać wyżej dwa pierwsze poziomy wyciągam pętlą ze zmiennych globalnych za pomocą Liquid, jeśli chcemy wejść głębiej w kategorie, trzeba to zrobić asynchronicznie javascriptem:

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

Domyślam się, że chodzi o "hover", który się traci w momencie "zjechania" niżej w menu. Nie mam zielonego pojęcia gdzie to poprawić i jak.

Rozwiązane:

header .primary-nav .categories-menu-container > ul > li > ul > li {
    padding: 0 20px;
    font-size: small;
    margin-bottom: 11px; <-- To coś powoduje, że hover się traci
}