查看我的 fiddle here
我想我快到了。
我想要嵌套的 <ul>
当他们的 parent 悬停时滑出。
这很好用,但是当您尝试将鼠标悬停在嵌套上时,它会切换到最后一个嵌套 <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%;
}
谢谢!
最佳答案
您的代码应如下所示:
参见: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;
}
关于jquery - 在嵌套列表 ul 上保持悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51176402/