How to make menu close slower than it opens?

For example, the menu opens in 1 second when hovering. After I removed the mouse from the unit, needs to be delayed, for example, 3 seconds, and then the menu should instantly close.

Can we implement with transition?

.menu {
...
height: 200px;
transition: all 1s;
}

.menu:hover {
height: 600px;
}
July 12th 19 at 17:04
1 answer
July 12th 19 at 17:06
Solution
No, you will need a minimum of JS to add a CSS class with a different timing.

Upd: I was wrong, in some cases: https://jsfiddle.net/IonDen/hphzyy6u/
Oh, and what do you say about this? Excerpt from the book:

"One problem with drop-down menus in CSS is that they usually disappear very quickly
if you accidentally mouse off the menu. However, you can make the menu appear quickly but disappear slowly
using the transition-delay property. To do so, you add the following code to the original style:
transition-delay: 5s;
Then add no delay to the :hover style:
transition-delay: 0;
It's somewhat counterintuitive, but this code basically makes the :hover transition happen immediately, with
no delay. But to return to the regular style (where the menu disappears) takes 5 seconds. During that time, a
visitor has enough time to move his errant mouse back over the menu before it disappears."

Tried now is to do not working as it should. What is written in General, so before you could do or what? - lucas_Robel0 commented on July 12th 19 at 17:09
: you are right, it works - abdul_Hagenes89 commented on July 12th 19 at 17:12
https://jsfiddle.net/IonDen/hphzyy6u/ - abdul_Hagenes89 commented on July 12th 19 at 17:15
: Just realized the logic of this action. Thanks for the code. - lucas_Robel0 commented on July 12th 19 at 17:18

Find more questions by tags HTMLCSS