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

时间:2018-07-04 14:52:53

标签: jquery css menu

看到我的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%;
            }

谢谢!

1 个答案:

答案 0 :(得分:0)

您的代码应如下所示:

请参阅: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;
}