How to set up a multi-level menu?

Question

JavaScript

Immediately an example on CodePen .
I’ve been sitting for several hours and don’t understand how to do an elementary thing - correctly configure the multi-level menu. You are probably familiar with the jQuery AmazonMenu script . So, I connected everything, but it’s impossible to make nested menu items disappear when the mouse cursor is not hovering over the menu. Nesting in the example is three levels (maybe more).


The screenshot shows how nested items open when hovering over.

What I can't set up:

1. If you open any nested items and remove the cursor from the menu, the menu will remain open, but you need to close it.
   
2. If you open all levels of one menu, and then move the cursor to some other menu item, and then again to the previously opened one, then all nesting levels will open at once, but only one is needed - the child one.
   

The brain is already boiling, I have tried so many things ...
What and how to prescribe so that the whole thing works normally? Tell me please.

Answer 1

Add an exitMenu handler:

$menu.menuAim({
  activate: activateSubmenu,
  deactivate: deactivateSubmenu,
  exitMenu: deactivateSubmenu,
});

At the end of the deactivateSubmenu method, add . return true