JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
     <p>>>Show drop down menu<<</p>
                    <ul style="transition: all 500ms ease;" class="menu_invisible">
                    <li><a href="#">whatever</a></li>
                    <li><a href="#">I don't know</a></li>
                    <li><a href="#">Why it</a></li>
                    <li><a href="#">doesn't</a></li>
                    <li><a href="k#">work?</a></li>
      <li><a href="#">Help please...</a></li>
    </ul>
 </div>

CSS

.menu_invisible
{
   display:none;    
}
.menu
{
  cursor:pointer;
}

JavaScript

document.querySelector(".menu p").onclick = function()
{
    let seznam=document.querySelector(".menu ul");
    if(seznam.classList.contains('menu_invisible'))
    { 
        seznam.classList.remove('menu_invisible');
    }
    else
    {
        seznam.classList.add('menu_invisible');
    }
}