jquery - 将鼠标悬停在主菜单和子导航上时停止子导航关闭

Question

当主导航中的链接悬停时，我有一个淡入淡出的子导航和一个全宽背景的子导航动画。当悬停在主导航和子导航上时，如何保持子导航打开。当您不在主菜单项上方时，子导航会关闭。

                <nav class="header-menu menu">
                <ul>
                    <li class="menu-item-has-children">
                        <a href="#">
                            <span class="nav-text">Expertise</span>
                            <span class="icon-down-arrow-small "></span>
                        </a>

                        <ul class="sub-menu">
                            <li><a href="">Meet our Team</a></li>
                            <li><a href="">Contact Us</a></li>
                            <li><a href="">Our Process</a></li>
                        </ul>

                    </li>
                    <li class="menu-item-has-children">
                        <a href="#">
                            <span class="nav-text">Projects</span>
                            <span class="icon-down-arrow-small "></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a href="">Meet our Team</a></li>
                            <li><a href="">Contact Us</a></li>
                            <li><a href="">Our Process</a></li>
                            <li><a href="">Our Process</a></li>
                            <li><a href="">Our Process</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Insights</a>
                    </li>
                    <li>
                        <a href="#">Careers</a>
                    </li>
                </ul>
            </nav>

  $(".nav-text").mouseenter(function(){

                var that = this;
                var subNavHeight = $(that).parent().siblings('.sub-menu').outerHeight();

                $(that).parent().parent().siblings().children('.sub-menu').stop().animate({opacity: 0}, 100);// fade out all sub-menus


                $('.menu-expand').stop().animate({height:subNavHeight},200, "linear", function(){
                    $(that).parent().siblings('.sub-menu').stop().animate({opacity: 1}, 200);



                });

            });

标签： jqueryhtmlcssmenuhover