鼠标悬停导航不会在点击时保持打开状态

Hover nav wont stay open to click on

本文关键字：状态 导航 悬停 鼠标      更新时间：2023-09-26

所以这是实际的页面，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>
有谁能帮我一下吗?

我想要的是下拉菜单保持打开足够长的时间来点击它，或者至少在它被悬停在上面的时候。

好了，我删除了所有的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;
}

下面是结果的演示。请记住，动画功能和动画速度都可以很容易地改变。

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

相关文章：