collapsing ngbDropdown menu items on mouse leave

I have a problem implementing the menu with ngbDropdown. Sub menus are supposed to toggle based on mouse enter and mouse leave events. It is achieved by using (mouseenter)="deviceDrop.open()" and (mouseleave) which basically works however menu is not collapsing if I hoover another one:

<div ngbDropdown #deviceDrop="ngbDropdown">
  <button ngbDropdownAnchor (mouseenter)="deviceDrop.open()"> Devices </button>
  <div ngbDropdownMenu
       (mouseleave)="$event.stopPropagation(); deviceDrop.close();">
    <button ngbDropdownItem [routerLink]="['devices']">
      Manage devices
    </button>
    <!-- here go other sub menu items  -->
  </div>
   <!-- here other top-level menu items  -->
</div>

Can you advise me on how to avoid this annoying effect?