我在问题下方附上了一段代码。当我将鼠标悬停在太多菜单项上时，应该触发的下拉菜单.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>
答案 0 :(得分：2)
对这些选项使用嵌套的多层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），而且效果也更好。