Поддерживать наведение на вложенный список ul

Question

Смотрите мою скрипку здесь

Думаю, я почти у цели.

Я бы хотел, чтобы вложенные <ul> выскальзывали, когда их родитель зависал.

Это прекрасно работает, НО, когда вы пытаетесь навести курсор на вложенную, она переключается на последние вложенные опции <ul>. В приведенном выше примере вы увидите, что меню переключается на «Международные» пункты каждый раз, когда вы наводите курсор.

JS:

$(document).ready(function(){

    $('li.has-children').hover(function(e) {
        e.stopPropagation();
        $(this).children('ul').addClass('nav-open');
    }, function(e){
        e.stopPropagation();
        $('li.has-children > ul').removeClass('nav-open');
    }); 

}); 

CSS:

ul.main-menu {
            float: left;
            width: 33%;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            background: white;
            font-size: 1.3em;
            padding: 0;
      background:red;
        }

            ul.main-menu li {
                width: 100%;
                float: left;
            }           

            ul.main-menu li a {
                display: block;
                float: left;
                width: 100%;
                padding:13px 0;
                color: #333;
                position: relative;
            }


            ul.main-menu li ul {
                position: absolute;
                width: 100%;
                top:0;
                left: 100%;
                opacity: 0;
                transition: all 0.1s ease-in-out;
            }

            ul.main-menu ul.nav-open {
                opacity: 1;
                left: 90%;
            }

Спасибо!

Answer 1

Ваш код должен выглядеть так:

см .: https://jsfiddle.net/ainouss/23asw6d1/1/#&togetherjs=PIa9R7MsUx

ul.main-menu {
    float: left;
    width: 33%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background: white;
    font-size: 1.3em;
    padding: 0;
}
.has-children{
    border:1px solid red;
}
.has-children ul{
    display:none;
}

ul.main-menu li {
    width: 100%;
    float: left;
}

ul.main-menu li a {
    display: block;
    float: left;
    width: 100%;
    padding:13px 0;
    color: #333;
    position: relative;
}