How to add transitions to a drop down menu?

Question

I have a drop-down menu that makes text appear when clicked. However, when I add transitions to it, nothing happens. It still just shows up without sliding down. I want the transition to show the text gradually from top to bottom as it appears.

This is the 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 is the class name for the button clicked that shows this .drop-down text.

I don't know if I used the transition properly.

Should I have used JavaScript instead? And if not what do I need to change?

JavaScript Code:

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'
    }
}

Answer 1

You can do this without javascript.

 .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; opacity:0; visibility:hidden; }.menu:hover.drop-down{ opacity:1; visibility:visible; }