Как сделать с помощью JQuery, чтобы при наведении на элемент меню появлялся другой блок?

Question

[Axiniya]

Есть трёхуровневое меню, нужно сделать так, чтобы при наведении на определённый пункт появлялся второй уровень и не скрывался, при выведении курсора за пределы второго уровня. Так же при наведении на пункт меню на втором уровне - появлялся третий уровень и тоже не скрывался при выведении за пределы блока.
Тут примерная структура - https://jsfiddle.net/Axiniya/vLd75p6s/15/
Я написала с помощью CSS, но там сделать так, чтобы див не пропадал при выведении курсора за пределы блока невозможно.
На самом сайте бургер-меню сделано с помощью JQuery и выезжает при клике сбоку, так же там есть крестик для закрытия, и меню закрывается при клике на оверлей, так что проблем со скрытием меню не будет.

Буду рада любым подсказкам, спасибо!

Comments

[Надим]

Я не пробовал, но в теории вполне можно все на чистом CSS. Что вам мешает внутрь всплывающего блока добавить еще один прозрачный блок с z index поменьше, с абсолютным позиционированием и на всю ширину высоту экрана? Соответственно, когда уводите курсор за пределы блока... курсор будет по факту оставаться над прозрачным блоком, что внутри всплывающего блока.

Ну а если по прозрачный блок получает фокус (по нему кликнули, т. е. кликнули за пределами всплывашки), то делаем прозрачный блок невидимым и это автоматом схлопнет всплывающий блок.

[Axiniya]

Надим Закиров, дело в том, что у всплывающего блока фиксированная позиция, и если внутри него создать блок с абсолютной позицией, то он все равно будет ограничен родительским блоком. И просто еще на моем сайте уже есть оверлей, который появляется при открытии меню, и при клике на сам оверлей или закрывающую кнопку меню уезжает. Но все равно спасибо!