Le souci avec les sous menus
Les menus et sous menus se basent très généralement sur des survols d’éléments, c’est à dire que c’est parce que je survole l’élément de menu A que s’affiche le sous-menu A. Toutefois cela réduit donc la surface réactive uniquement à la forme de l’élément, et si vous avez le malheur de faire sortir le curseur de votre souris hors de l’élément, hop plus de sous-menu.
Qui n’a jamais pesté contre ce type de menu intransigeant concernant les sous-menus ?
Sous menu qui s’affiche 
Une petite erreur de parcours et patatras
Une des solutions possibles mise en place par le passé
Amazon avait résolu ce souci auparavant (ce ne semble plus être le cas) en créant dynamiquement pour chaque élément une zone « safe », et tant que le curseur reste dans cette zone il ne déclenche pas le survol d’un autre élément.
Ce n’est pas une technique très courante, car celles utilisées généralement se servent de timers pour estimer l’action qu’a voulu faire l’utilisateur (s’il reste un petit moment sur un sous élément c’est qu’il souhaite l’ouvrir)
Une solution avec des svg créés dynamiquement
Une solution de ce type a été proposé par Hakim El Hattab lors de sa conférence au CSS day 2019. Elle repose sur la création à la volée de SVG (ceux étant créés mais non affichés) permettant de délimiter des zones
Une autre solution basée sur Jquery
Grâce à Jquery, vous pouvez également utiliser la petite bibliothèque jQuery-menu-aim pour faire des méga menus responsive comme amazon.
Sources qui m’ont aidé pour cet article et que je vous recommande de lire également :
https://css-tricks.com/menus-with-dynamic-hit-areas/
https://github.com/kamens/jQuery-menu-aim
https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/
