Как сделать выпадающее меню с задержкой (JS)?

Question

[Андрей]

Есть выпадающее меню, нужно сделать, чтобы субменю выпадали с задержкой.

Это пример как я реализовал на данный момент.

Т.е. как только на кнопку наведен курсор через setTimeout запускаем отсчет до появления меню, если курсор уведен с кнопки, то отменяем таймаут через clearTimeout.
Не могу понять почему это не срабатывает.
transition не работает с display: none, поэтому это не вариант.

Answer 1

[Владимир]

1) Я бы не менял свойство display:block а присваивал класс, например .open
2) https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
3) Таймаут тоже нужен но для другого, Debouncing
https://css-tricks.com/the-difference-between-thro...

Comments

[Андрей]

Тогда вопрос: как анимация работает с display: none? т.к. к примеру transition работать не будет. Для меня это критично.

[Владимир]

Андрей: Никак не работает, сначала показіваешь, потом анимируешь например opacity