Tengo un menú desplegable que hace que aparezca texto cuando se hace clic. Sin embargo, cuando le agrego transiciones, no pasa nada. Todavía aparece sin deslizarse hacia abajo. Quiero que la transición muestre el texto gradualmente de arriba a abajo tal como aparece.

Este es el CSS:

 .drop-down { display: flex; flex-direction: column; text-align: left; transition: height 0.3s ease-in-out; transition-delay: 0.1s; overflow: hidden; position: relative; }

.menu es el nombre de la clase del botón en el que se hizo clic y que muestra este texto .drop-down .

No sé si usé la transition correctamente.

¿Debería haber usado JavaScript en su lugar? y si no que tengo que cambiar?

Código JavaScript:

 const menu = document.querySelector('.menu') const menuContent = document.querySelector('.drop-down') menu.addEventListener('click', menuClick, false); menuContent.style.display = 'none' function menuClick() { menuContent.classList.toggle('show'); if (menuContent.style.display == 'none') { menuContent.style.display = 'block' } else { menuContent.style.display = 'none' } }