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

Question

这里是实际页面，remsen，下面是代码的样子。

<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>

谁能帮我解决这个问题？

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

Answer 1

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

首先，你不需要隐藏子菜单，你可以在css中将它们定义为max-height:0px。通常你使用display:none，但显示不能用过渡动画。 height:auto 也有点小问题。

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

第三：我将<div>s 移动到各自的<li>s 中，以便于控制。

我添加了一些其他类等，但尽量保持初始代码的完整性。但是，正如您在下面的演示中看到的那样，您可以删除很多内容。

我认为这些都是我对 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_drop_menu1, .nav_drop_menu2, .nav_button1, .nav_button2{
    display: inline-block;
}

成为：

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

这是结果的DEMO。请记住，动画功能和动画速度都可以轻松更改。

我希望，这是你所期望的结果。