看到我的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%;
}
谢谢!
答案 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;
}