我在下面附上了我的问题的片段。当我将鼠标悬停在太多菜单项上时，它应该触发的下拉菜单将.slideUp()过早。它应该运行的逻辑很简单:
如果鼠标悬停 - 保留其关联的下拉菜单。
如果鼠标移开 - 丢失其关联的下拉菜单。
如果鼠标悬停在下拉列表上，则保持下拉列表显示。
现在看来 (2) 并不总是有效，因为如果您将鼠标悬停在一个元素上而不是另一个元素上，即使鼠标停留在第二个元素上，第二个元素也会立即失去其下拉列表。
请帮忙，它似乎只有在您稍等一下并刻意一次点击一个菜单项以触发下拉菜单时才有效，但显然这不是用户的行为方式。
编辑:考虑到我的页面 CSS 的详细信息，我需要一个 JavaScript 解决方案，这使得嵌套 CSS 解决方案不可取。
jQuery(".header2 li a").mouseover(function(event){
jQuery(".dropdown").css('display','none');
});
jQuery(".header2 li a").hover(function (event) {
event.preventDefault();
$id = jQuery(this).attr('id');
jQuery("."+$id +".boxs").stop().slideDown(); //id of href is a class on .boxs/.dropdown for targetting
},function (event) {
$id = jQuery(this).attr('id');
setTimeout(function () {
if ( jQuery("."+$id+".boxs").hasClass('active')) {
}
else {
event.preventDefault();
jQuery("."+$id +".boxs").slideUp();
console.log($id);
}
}, 500);
});
jQuery(".dropdown").mouseenter(function () {
jQuery(this).addClass('active');
jQuery(this).show();
});
jQuery(".dropdown").mouseleave(function () {
jQuery(this).slideUp();
jQuery(this).removeClass('active');
});.header2 li {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
}
.header2 li a{
padding:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxs header2">
<li>
<a href="/" class="active active1">Home</a>
</li>
<li>
<a href="/category/news" class="" id="news">News</a>
</li>
<li>
<a href="/category/featured" class="" id="f">Featured</a>
</li>
<li>
<a href="/category/gear" class="" id="another">Another Dropdown</a>
</li>
<li>
<a href="/category/the-journal" class="" id="one_more">One More! </a>
</li>
</ul>
<!--DROPDOWNS BELOW-->
<div class="news boxs dropdown" style="display: none;">
<div class="container">
<div class="boxs">
<div class="row">
<div class="col-md-6 nopadding">
<div class="col-xs-3">
<ul>
<li><h3>News From</h3></li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>Capitol Hill</li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>The White House</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="f boxs dropdown" style="display: none;">
<div class="container">
<div class="boxs">
<div class="row">
<div class="col-md-6 nopadding">
<div class="col-xs-3">
<ul>
<li><h3>News From</h3></li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>Toronto</li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>Quebec</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="another boxs dropdown" style="display: none;">
<div class="container">
<div class="boxs">
<div class="row">
<div class="col-md-6 nopadding">
<div class="col-xs-3">
<ul>
<li><h3>Zookeepers</h3></li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>Lions</li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>Tigers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="one_more boxs dropdown" style="display: none;">
<div class="container">
<div class="boxs">
<div class="row">
<div class="col-md-6 nopadding">
<div class="col-xs-3">
<ul>
<li><h3>Milk</h3></li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>1%</li>
</ul>
</div>
<div class="col-xs-3">
<ul>
<li>2%</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
对于这些选项使用嵌套的多级 ul 层次结构会更有意义，因为它是单独的 div 元素(以及它们之间的后续间隙)导致问题。
如果您使用嵌套的 ul 元素，您可以单独在 CSS 中完成此操作，如下所示:
.header2 > li {
float: left;
list-style: none;
padding: 0;
margin: 0 5px;
position: relative;
}
.header2 > li > ul {
display: none;
padding: 0;
width: 200px;
}
.header2 > li:hover > ul {
display: block;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxs header2">
<li>
<a href="/" class="active">Home</a>
</li>
<li>
<a href="/category/news">News</a>
<ul>
<li>
<h3>News From</h3>
</li>
<li>Capitol Hill</li>
<li>The White House</li>
</ul>
</li>
<li>
<a href="/category/featured">Featured</a>
<ul>
<li>
<h3>News From</h3>
</li>
<li>Toronto</li>
<li>Quebec</li>
</ul>
</li>
<li>
<a href="/category/gear">Another Dropdown</a>
<ul>
<li>
<h3>Zookeepers</h3>
</li>
<li>Lions</li>
<li>Tigers</li>
</ul>
</li>
<li>
<a href="/category/the-journal">One More! </a>
<ul>
<li>
<h3>Milk</h3>
</li>
<li>1%</li>
<li>2%</li>
</ul>
</li>
</ul>单独使用 CSS 可以使逻辑更具可扩展性(您只需添加更多 li 和 ul 元素即可获得更多菜单项，而不会影响 JS)并且性能也更好。
关于jQuery 悬停鼠标在列表下拉列表中过早触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51787561/