保持悬停在嵌套列表 ul

Question

见我的fiddle here

我想我快到了。

我希望嵌套的<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;
}