WordPress wp导航菜单的问题

我在让wp导航菜单正常工作时遇到问题。我在我的菜单设计中有一个css三角形，因此菜单被放置在更远的地方，导致菜单在你到达它之前消失。为了解决这个问题，我添加了一些jQuery，但是现在如果打开菜单，然后将鼠标移到它上面，菜单将保持打开状态。该网站位于：以下是我的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>

<
li id=“menu-item-460”class=“menu-item-type-post\u type菜单项对象页menu-item-460”>

我有两个想法：

1） 尝试使用jQueryHoverIntent插件，我对它几乎一无所知，但我一直在阅读它，但是它缺少好的教程

2） 删除我的Jquery代码，使用Jquery在子菜单周围添加一个包装div，并将其放置在更高的位置，添加一个边距以向下推子菜单，使视图中没有空格，但父菜单项和子菜单之间没有gam

---

我应该采取什么样的方法来解决这个问题？没有人有更好的解决方案吗？

尝试将

mouseleave

更改为

mouseout

，你知道吗，让我们试试其他方法。答案就要来了。。我刚去了你的网站，它的工作原理是。。你做了一个更改，对吗？检查你的控制台中的js错误eEliran，是的，我在这里等了一会儿，当时每个人都很忙，所以我在子菜单上尝试了jquery.wrap（），然后给它一个顶部为-10的边距。就这样，砰砰修理好了，回家吃晚饭。不过谢谢：）