0

我无法让 wp-nav-menu 正常工作。我的菜单设计中有一个 CSS 三角形，因此菜单位于更下方，导致菜单在您到达之前消失。为了解决这个问题，我添加了一些 jQuery，但现在如果你打开它然后将鼠标移到它上面，菜单将保持打开状态。该网站位于：https : //www.appshc.com/ 这是我的 Jquery 代码：

       $(function() {

        //menu bug fix

        $("li.menu-item").mouseover(function() {

            var submenu = $('.sub-menu');
            $(this).children('ul').show();

        });

        $("li.menu-item ul").mouseleave(function() {

            $("li.menu-item ul").delay(200).hide();          

        }); 
   });

这是由 wordpress 生成的 HTML，对糟糕的格式感到抱歉 

 <div class="menu-mainmenu-container">
   <ul id="menu-mainmenu" class="top-nav"><
   li id="menu-item-460" class="menu-item menu-item-type-post_type menu-item-object-page        menu-item-460"><a href="https://www.appshc.com/treatment-center-apps/">HEALTHCARE APPS</a></li>
    <li id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-459"><a href="https://www.appshc.com/business-apps/">BUSINESS APPS</a></li>
    <li id="menu-item-464" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-464"><a href="#">MORE APPS</a>
    <ul class="sub-menu">
        <li id="menu-item-458" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-458"><a href="https://www.appshc.com/music-apps/">MUSIC APPS</a></li>
        <li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a href="https://www.appshc.com/church-apps/">CHURCH APPS</a></li>
    </ul>
    </li>
    <li id="menu-item-461" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-461"><a href="https://www.appshc.com/mobile-app-blog/">BLOG</a></li>
    <li id="menu-item-462" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-462"><a href="https://www.appshc.com/contact/">CONTACT US</a></li>
    <li id="menu-item-463" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-463"><a href="#">GET STARTED</a></li>
    </ul></div>

我有几个想法：

1) 尝试使用我几乎一无所知的 jQuery HoverIntent 插件，但我一直在阅读它，但它缺乏好的教程。

2）删除我的Jquery代码并使用jQuery在子菜单周围添加一个包装器div，并将其定位得更远，添加一个边距以将子菜单向下推，以便空间不存在，但父菜单项和子菜单之间没有gam .

我应该为此采取什么路线，是否有人对此有更好的解决方案？

4

0 回答 0