When working with multi-dimensional dropdown menus, one often runs into the problem that wrong submenus are opened accidentally or the desired submenu is accidentally closed. This effect occurs when the mouse pointer leaves the corresponding menu at the top level while navigating to an already expanded submenu.
To solve the problem, one can easily incorporate a deliberate delay in the menu with the help of JavaScript:
See the Pen Pastejacking #2 by David Vielhuber (@vielhuber) on CodePen.
On the other hand, you can use sophisticated plugins such as jQuery-menu-aim , which even evaluate the direction of the mouse pointer movement.