Jquery 将鼠标悬停在嵌套列表上

看我的

我想我快到了

我喜欢嵌套的

在其父对象悬停时滑出

这可以正常工作，但当您尝试将鼠标悬停在嵌套菜单上时，它会切换到最后一个嵌套的

选项。您将在上面的示例中看到-每次将鼠标悬停在上方时，菜单都会切换到“国际”项

JS:

CSS:

---

谢谢

您的代码应该如下所示：

见：

---

抱歉弄乱了你的风格，你仍然可以更新它；我不能让这与我的造型。我需要子导航滑出主列表的顶部，而不是父列表项。我注意到你改变了JS和CSS，是JS回答了我的问题吗？谢谢如果您仍然想将其顶部对齐，请参见，但您应该更改子下拉列表min High以使其完美工作。顺便说一句，您不需要event.stopPropagation（）回答您问题的更改是：display:none by defalut，display:block when hover发生。

$(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');
    }); 

}); 

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

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