Javascript 悬停导航不会保持打开状态以单击

这是实际的页面，这是代码的样子

<script>
    $(document).ready(function(){

            $(".nav_drop_menu1").hide();
            $(".nav_button1").show();

        $('.nav_button1').hover(function(){
        $(".nav_drop_menu1").slideToggle();
        });

            $(".nav_drop_menu2").hide();
            $(".nav_button2").show();

        $('.nav_button2').hover(function(){
        $(".nav_drop_menu2").slideToggle();
        });
    });
    </script>


<br>



    <nav>
    <ul>
        <li class="nav_button1">Home</li>
        <li class="nav_button2">Services</li>
        <li>Contact</li>
            <div class="nav_drop_menu1">
                <ul>
                    <li><a href="index.html">Current Brews</a></li>
                    <li><a href="aboutus.html">About Us</a></li>
                    <li><a href="contactus.php">Contact Us</a></li>
                </ul>
            </div>
            <div class="nav_drop_menu2">
                <ul>
                    <li><a href="index.html">Current Brews</a></li>
                    <li><a href="aboutus.html">About Us</a></li>
                    <li><a href="contactus.php">Contact Us</a></li>
                </ul>
            </div>
    </ul>
</nav>

$（文档）.ready（函数（）{
$（“.nav_drop_menu1”）.hide（）；
$（“.nav_按钮1”）.show（）；
$（'.nav_button1'）。悬停（函数（）{
$（“.nav_drop_menu1”）.slideToggle（）；
});
$（“.nav_drop_menu2”）.hide（）；
$（“.nav_按钮2”）.show（）；
$（'.nav_按钮2'）。悬停（函数（）{
$（“.nav_drop_menu2”）.slideToggle（）；
});
});



主页
服务
接触

有人能帮我吗

---

我想要的是让下拉菜单保持足够长的打开时间，以便实际单击它，或者至少在它悬停在上面时保持打开状态。

好的，我删除了所有JQuery。我用css添加了所有的效果

首先，您不需要隐藏子菜单，只需在css中将它们定义为

max height:0px

。通常使用

display:none

，但不能使用转换设置显示动画。另外，

height:auto

有点故障

第二：你可以用纯css产生所有的效果，包括jquery库，因为它实际上很重

第三：我将

移动到相应的

中，使它们更易于控制

我添加了一些其他类等，但试图保持初始代码的最大值不变。但是，正如您在下面的演示中所看到的，您可以删除很多内容

我认为这些都是我对css所做的更改：

.nav_button:hover>.submenu>ul{
    max-height: 30px;
}

.submenu{
    position: absolute;
    left: 0;
}

.submenu ul{
    overflow: hidden;
    transition: max-height 0.3s linear;
    max-height: 0px;
}

及

成为：

.nav_button1, .nav_button2{
    display: inline-block;
}

下面是结果的一个例子。请记住，动画的功能和速度都可以轻松更改

---

我希望，这是您期望的结果。

这太棒了。谢谢你的帮助！

.nav_button1, .nav_button2{
    display: inline-block;
}