主菜单 - 导航栏
$(".Services").hover(function() {
$(".Services-Dropdown").fadeIn("slow");
}, function() {
$(".Services-Dropdown").fadeOut("slow");
});
$(".Solutions").hover(function() {
$(".Services-Dropdown-1").fadeIn("slow");
}, function() {
$(".Services-Dropdown-1").fadeOut("slow");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menubar">
<div class="container">
<div id="navbar" class="navbar">
<div class="navbar-header">
<a class="navbar-brand clearfix" href="index.php"><img class="logo" alt="logo" src="assets/img/png/Final%20Logo.png"> </a>
</div>
<div id="collapse-1" class="navbar-collapse collapse navbar-right font-menubar">
<ul class="navbar-nav nav">
<li><a href="About.html">About Us</a></li>
<li>
<a href="#" class="Services">Services</a>
</li>
<li>
<a href="#" class="Solutions">Solution</a>
</li>
<li>
<a href="Newsfeed.php">News & Updates</a>
</li>
<li>
<a href="https://ww4.autotask.net/ClientPortal/Login.aspx?ci=800377" target="_blank">Support</a>
</li>
<li style="border-right:0"><a href="#contactus">Contact us</a></li>
</ul>
</div>
</div>
<div class="mob-menu">
<a href="index.php"> <img class="logo" alt="logo" src="assets/img/png/Final%20Logo.png" style="position: absolute"></a>
<img id="mob-menu-icon" src="assets/img/svg/menu.svg" class="hidden-md menu intialmenu" />
</div>
</div>
</div>
<section>
<div class="Services-Dropdown Services Menubar-Dropdown">
<div class="col-md-12">
<div class="row" style="padding-top:3%;padding-bottom: 3%">
<a href="Ecm.html">
<div class="col-md-3 text-center" style="border-right:0.1px solid rgba(0,0,0,0.3)">
<div class="row"><img src="assets/img/svg/ecm.svg" style="width:30%" /></div>
<div class="menu-item">Enterprise Content <br> Management</div>
</div>
</a>
<a href="Digital.html">
<div class="col-md-3 text-center" style="border-right:0.1px solid rgba(0,0,0,0.3)">
<div class="row"><img src="assets/img/svg/digital.svg" style="width:30%" /></div>
<div class="menu-item">Digital Media <br>Marketing</div>
</div>
</a>
<a href="Msp.html">
<div class="col-md-3 text-center" style="border-right:0.1px solid rgba(0,0,0,0.3)">
<div class="row"><img src="assets/img/svg/msp.svg" style="width:30%" /></div>
<div class="menu-item">Managed IT<br>Services</div>
</div>
</a>
<a href="Bc&Dr.html">
<div class="col-md-3 text-center">
<div class="row"><img src="assets/img/svg/bc.svg" style="width:30%" /></div>
<div class="menu-item">BC & <br>DR</div>
</div>
</a>
</div>
</div>
</div>
<div class="Services-Dropdown-1 Solutions Menubar-Dropdown">
<div class="col-md-12">
<div class="row" style="padding-top:3%;padding-bottom: 3%">
<a href="Systems-Integration.html">
<div class="col-md-3 text-center" style="border-right:0.1px solid rgba(0,0,0,0.3)">
<div class="row"><img style="width:30%" src="assets/img/svg/si.svg" /></div>
<div class="menu-item">Systems <br> Integration</div>
</div>
</a>
<a href="It-security.html">
<div class="col-md-3 text-center" style="border-right:0.1px solid rgba(0,0,0,0.3)">
<div class="row"><img style="width:30%" src="assets/img/svg/sa.svg" /></div>
<div class="menu-item">IT <br> Security</div>
</div>
</a>
<a href="Storage.html">
<div class="col-md-3 text-center" style="border-right:0.1px solid rgba(0,0,0,0.3)">
<div class="row"><img style="width:30%" src="assets/img/svg/cloud.svg" /></div>
<div class="menu-item">Storage <br> Solutions</div>
</div>
</a>
<a href="ecm.html">
<div class="col-md-3 text-center" style="border-right:0.1px solid rgba(0,0,0,0.3)">
<div class="row"><img style="width:30%" src="assets/img/svg/wire.svg" /></div>
<div class="menu-item">Wireless<br> Solutions</div>
</div>
</a>
</div>
</div>
</div>
</section>
由于涉及大量样式，建议您访问http://www.missancomputer.com/about-us.php并尝试将鼠标悬停在Services / Solutions以查看问题。
问题简述：一旦我将鼠标悬停在服务上，并将鼠标移向services下拉列表，它就会闪烁并返回。更像是一个又一个。 JS出了什么问题？
答案 0 :(得分：0)
好吧，导致问题的是li的填充。您还需要考虑巩固悬停效果。以下是我对您的应用程序的建议 - 向li添加数据标记，现在您有一个合并函数，可以在HTML完成后处理所有下拉列表。我尝试使用jQuery选择器非常具体，以便您知道它正在为导航栏选择li
<ul class="navbar-nav nav">
<li data-dropdown="Services-Dropdown">
<a href="#" class="Services">Services</a>
<div class="Services-Dropdown Menubar-dropdown" style="display:none;">Dropdown</div>
</li>
</ul>
$('#navbar .nav > li').on('mouseenter mouseleave', function(){
var $dropdown = "." + $(this).data('dropdown');
$(dropdown).fadeToggle("slow");
});