Javascript jQuery子菜单不会消失，除非将其悬停一次

以下是html代码：

<div class="main-nav main-nav-default">
<div class="container">
    <div class="main-nav-logo">
        <a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
    </div>

    <div class="main-nav-links">
        <ul id="responsive">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li class="dropdown"><a href="services.html">Services</a>
                <ul class="dropdown-lists">
                    <li><a href="research_sector.html">Research Sector</a></li>
                    <li><a href="http://online.c-research.in/">Online Research</a></li>
                    <li><a href="http://travel.c-research.in/">Travel Research</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="http://panel.c-research.in">Panel</a>
                <ul class="dropdown-lists">
                    <li><a href="http://focusgroup.c-research.in/">Discussion Group</a></li>
                </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
            <li class="dropdown"><a href="#">Language</a>
                <ul class="dropdown-lists">
                    <li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
                        function googleTranslateElementInit() {
                            new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
                        }
                    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
                </ul>
            </li>
            </li>
        </ul>
    </div>
</div>

基本上，当我将鼠标悬停在下拉菜单上时，它可以很好地工作，但它不会消失，除非我将鼠标悬停在

的子菜单上。如果我将鼠标悬停在
.dropdown
类上，然后导航离开而不将鼠标悬停在子菜单上，则子菜单不会消失。它不会动，除非我至少在它上面盘旋一次

我知道我的jQuery只允许在菜单悬停一次时向上滑动菜单，我想知道一个即使我不悬停在子菜单上也能工作的代码组合

此外，这里是下拉CSS代码，我怀疑子菜单不是父主导航链接的子元素，或者#响应：

。主导航链接{
填充：20px 0px 20px 0px；
}
#响应的{
文本对齐：右对齐；
}
#响应力{
位置：相对位置；
文本对齐：右对齐；
显示：内联块；
}
#响应性li>a{
字体系列：“开放式SAN”；
字号：700；
右边填充：10px；
字体大小：14px；
字母间距：2px；
文本转换：大写；
文字装饰：无；
颜色：#fff；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
}
@介质（最大宽度：992px）{
#响应性li>a{
字体大小：12px；
}
}
#响应li>a：悬停{
颜色：#19B5FE；
}
.下拉列表{
文本对齐：居中；
}
#响应li。下拉列表列出li{
列表样式：无；
左边距：-29px！重要；
边框顶部：1px实心rgba（60,60,60,0.9）；
填充：10px 0px 10px 0px；
}
#响应li。下拉列表列出li>a{
颜色：rgba（204204,0.8）；
字体大小：12px；
字体大小：400；
}
#响应li。下拉列表li>a:悬停{
颜色：#fff；
}
#快速响应。下拉列表{
宽度：200px；
位置：绝对位置；
最高：200%；
背景：rgba（51,51,51,0.8）；
}
像这样更新jquery

$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
    $(this).find(".dropdown-lists").slideDown();

    }).mouseleave(function(){
    $(this).find(".dropdown-lists").slideUp();
});


编辑：

由于您在下拉列表CSS中使用了
top
属性，您最近的小提琴中的下拉列表还存在其他问题。在CSS中更新以下类

#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
 height:40px;
} 

您是否刚刚将mouseleave事件绑定到mouseenter事件中？当我将鼠标悬停在
下拉菜单之外时，子菜单将直接关闭，我甚至无法单击下拉菜单的链接。从字面上说，无论我是否将鼠标悬停在
下拉列表上，它都只是直接打开和关闭，而无需等待。哪个浏览器？我使用的是chrome，我可以毫无问题地点击链接。也许它彼此非常接近。你就是这么想的。只要在它们之间加一些填充物，你就可以清楚地测试它了。。我已经添加了CSS并更新了描述：您也可以在这里查看功能代码：我现在已经签出，使用100%的最大值确实可以解决问题，但子菜单位于导航栏上方，我是说它的重叠。我的导航栏高度为60px，因此当我应用100%的顶部值时，子菜单直接从父菜单开始，而不是从导航栏主菜单下方开始。。如果我把保证金放在最上面。。同样的事情再次发生，就像前面一样。使用边距填充代替边距填充。
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
 height:40px;
}