This is a non-standard Bootstrap 4 menu with 3 levels. The third level menus are controlled by jQuery, and the problem is that they stay open after the top menu item is closed. I'm also using jQuery to remove the need to click on the menus to show the sub-menus. It's sort of a mess. And I can't really change the HTML as it is output by a menu walker.

Question: how can I close all flyout menu items and their submenus (like 27028) when the top level menu item (3381) is closed?

Question: And how I can remove the redundant click on a menu item (like 27028) to show submenu items?

Here's a fiddle: <https://jsfiddle.net/s04ezjhr/>

```
<ul id="menu-main-menu-admin" class="navbar-nav"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-3381" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children nav-item menu-item-3381 dropdown">
<a title="Human Resources" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle" aria-haspopup="true">Human Resources <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27077" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27077"><a title="Test Link" href="#" class="dropdown-item">Test Link</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27028" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27028 dropdown"><a title="HR Reports" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle" aria-haspopup="true">HR Reports <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu" >
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27029" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27029"><a title="Change Of Status" href="https://example.com/change-of-status/" class="dropdown-item">Change Of Status</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27031" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27031"><a title="Failure To Start" href="https://example.com/failure-to-start/" class="dropdown-item">Failure To Start</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-27032" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27032"><a title="Intent To Hire" href="https://example.com/intent-to-hire/" class="dropdown-item">Intent To Hire</a></li>
</ul>
</li>
</ul>

```

This is the jQuery that currently controls the third level menu items and the "show on hover" submenus:

```
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');

  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show");
  });
  return false;
});

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

```