除非悬停一次，否则 jQuery 子菜单不会消失

Question

这里是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>

这里是 jQuery：

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

基本上，当我将鼠标悬停在下拉菜单上时，它可以完美地工作，但它不会消失，除非我将鼠标悬停在 .dropdown-lists 类的子菜单上。如果我将鼠标悬停在 .dropdown 类上并导航离开而不悬停在子菜单上，子菜单不会消失。除非我将它至少悬停一次，否则它会保持静止。

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

另外这里是下拉 CSS 代码，我怀疑子菜单不是父 main-nav-link 或#responsive 的子元素：

.main-nav-links { padding: 20px 0px 20px 0px; } #responsive { text-align: right; } #responsive li { position: relative; text-align: right; display: inline-block; } #responsive li > a { font-family: "Open Sans"; font-weight: 700; padding-right: 10px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 992px){ #responsive li > a { font-size: 12px; } } #responsive li > a:hover { color: #19B5FE; } .dropdown-lists { text-align: center; } #responsive li .dropdown-lists li { list-style: none; margin-left: -29px!important; border-top: 1px solid rgba(60,60,60,0.9); padding: 10px 0px 10px 0px; } #responsive li .dropdown-lists li > a { color: rgba(204,204,204,0.8); font-size: 12px; font-weight: 400; } #responsive li .dropdown-lists li > a:hover{ color: #fff; } #responsive li .dropdown-lists { width: 200px; position: absolute; top: 200%; background: rgba(51, 51, 51, 0.8); }

Answer 1

像这样更新你的 jquery。

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

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

DEMO

编辑：

由于您在下拉 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;
} 

Updated DEMO