将鼠标移出后，另一个元素的子菜单会隐藏

Question

我制作了一个子菜单列表，当用户将鼠标悬停在li列表上时，该列表会显示/隐藏jquery，每个li都显示一个单独的元素。 现在，我遇到了jQuery代码的问题，当鼠标离开时，它将隐藏该元素，并且无法检测到该元素上的悬停事件。

问题是，当切换到另一个列表菜单项并退出元素块时，我可以使其隐藏。但是我需要它来继续显示子菜单，以防鼠标悬停在上面。

代码如下：

$(".left-nav-list-view nav ul li").mouseenter(function () {
  clearMenuFlyout();
  if ($(this).data('has-submenu')) {
    var submenu_id = $(this).children('a').data('menu-id');
    $(".flyOut-nav-container").append($("[id=" + submenu_id + "]")).position({
      my: "left+1 top+0",
      at: "right top",
      of: this
    });
  }
}).on("mouseleave", function () {

});

function clearMenuFlyout(){
  $(".flyout-temp-container").append($(".flyOut-nav-container").children());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-nav-container flex-fixed">
  <nav class="left-nav-view collapsed" role="navigation">
    <div class="app-logo">
        <div class="burger-menu">
          <span class="burger-menu-icon"></span>
        </div>
      </div>
    <div class="left-nav-list-view">
      <nav>
        <ul>
          <li><a href="#"><span>Dashboard</span></a></li>
          <li id="AccountingMenu" data-has-submenu="true"><a data-menu-id="AccountingMenuItems" href="#"><span>Accounting</span><i class="list-in fa fa-chevron-right"></i></a></li>
          <li id="InventoryMenu" data-has-submenu="true"><a data-menu-id="InventoryMenuItems" href="#"><span>Inventory</span><i class="list-in fa fa-chevron-right"></i></a></li>
        </ul>
      </nav>
    </div>
  </nav>
</div>

基本上，clearFlyout函数采用一个已经存在的菜单元素并将其扔到另一个div中。 .flyout-temp-container默认为隐藏