【发布时间】：2018-06-21 00:59:15
【问题描述】：
我有一个仅使用 CSS 构建的多级下拉菜单。当鼠标移开时，下拉菜单会在关闭之前等待一秒钟。但是，主导航下面有多个下拉菜单，所以当鼠标从一个菜单移动到另一个菜单时，延迟会导致旧的下拉菜单在新打开的下拉菜单后面保持打开状态。
基本上我需要的是在鼠标移开时延迟下拉关闭，但如果鼠标移到另一个菜单上则立即关闭下拉菜单，从而防止多个下拉菜单堆叠在另一个之上。也感谢jQuery 的解决方案。
我当前的代码在这个jsfiddle 和下面的sn-p 中：
.main-navigation {
clear: both;
display: block;
float: left;
width: 100%;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation ul ul {
visibility: hidden;
position: absolute;
top: 105%;
left: 0;
transition: 0s 0.5s;
z-index: 9999;
margin-top: -3px;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
left: 100%;
}
.main-navigation ul ul a {
width: 250px;
}
.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
visibility: visible;
transition-delay: 0s;
z-index: 9999;
}
.main-navigation li {
float: left;
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
color: #fff;
text-decoration: none;
}
.navigation li {
display: inline;
}
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
background-color: #6FB7E9;
border-radius: 3px;
cursor: pointer;
padding: 12px;
padding: 0.75rem;
}
.navigation li a:hover,
.navigation li.active a {
background-color: #3C8DC5;
}
.navigation ul {
text-align: center;
padding: 0px;
margin-left: 0px;
margin-bottom: 50px;
margin-top: 20px;
}
.sub-menu li {
width: 100%;
}
.sub-menu {
background-color: #419bd0;
border-top: 3px solid #2d6b90;
}<nav class="main-navigation">
<div class="menu-main-nav-container">
<ul id="primary-menu" class="menu">
<li><a href="#">Parent</a>
<ul class="sub-menu">
<li><a href="#">Link Parent</a>
<ul class="sub-menu">
<li><a href="/">Link A</a></li>
<li><a href="/">Link A</a></li>
<li><a href="/">Link A</a></li>
<li><a href="/">Link A</a></li>
<li><a href="/">Link A</a></li>
<li><a href="/">Link A</a></li>
</ul>
</li>
<li><a href="#">Other</a>
<ul class="sub-menu">
<li><a href="/">Link B</a></li>
<li><a href="/">Link B</a></li>
<li><a href="/">Link B</a></li>
<li><a href="/">Link B</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>【问题讨论】：
-
当当前下拉菜单悬停时，您可以暂时禁用其他下拉菜单。您可以使用
mouseenter事件禁用它们并使用mousleave事件再次启用它们。 -
如果你能把完整的代码给我们看就更好了
-
@RakibulIslam 没问题，请参见此处：jsfiddle.net/zj9nLu38/11 如果您将鼠标悬停在第一个“链接父”链接上，然后将鼠标悬停在“其他”上，您将看到其他 get 与父链接内容重叠 - 如何可以避免吗？
-
我在小提琴中看不到问题。你能？如果是这样，请更新小提琴，以便我们看到问题。
-
@MoshFeu 我可以在小提琴中看到问题，我刚刚更新了 - 如果您在两个下拉菜单之间快速切换，您会看到它们重叠（深蓝色条）
标签： javascript jquery html css dropdown