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