La réponse est oui.
Allez, vous aussi vous avez cherché à faire une jolie transition CSS sur votre sous-menu, non ? mais vous vous êtes demandés comment faire, car « height: auto » ne fonctionne pas avec les transition. Alors quoi ? on va quand même pas mettre une hauteur fixe… Et encore moins le faire en JS…
Et bien la solution est vraiment simple en fait. Ce n’est pas sur height qu’il faut se baser… mais sur max-height !
Le code tout de suite :
.sous-menu {
display: block;
overflow: hidden;
max-height: 0;
transition: max-height 2s;
}
.menu li:hover .sous-menu {
max-height: 100em; // ça vous donne 100 ligne d'avance ;)
}enjoy 😉