JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topbar">
        <div class="menu" onCLick="dropit()">
            Hello
        </div>
        <div id="menu_drop" onmouseover="mOver(this)"                onmouseout="mOut(this)">
            hi
        </div>
</div>

CSS

.topbar
{
    width:100%; 
    height:60px;
    background:#000;
}
.topbar > .menu
{
    float:right;
    width:35%;
    height:100%;
    color:#fff;
    
}
.topbar > #menu_drop
{
      background:#fff;
      height:60px;
      position:absolute;
    /*display:none;*/
      width:100%;
      color:#000;
      left: 0px;
      right: 0px;
      top:-60px;
      -o-transition: top .50s ease;
      -moz-transition: top .50s ease;
      -ms-transition: top .25s ease;
      -webkit-transition: top .150s ease;
       transition: top .25s ease;
}

JavaScript

function dropit()
 {
   // document.getElementById("menu_drop").style.display="none";
   document.getElementById("menu_drop").style.top="0px";
 }
function mOut(obj)
 {
   obj.style.top="-90px";
     }

  function mOver(obj)
 {
   obj.style.top="0px";

 }