JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">
        <div id="boundary"></div>
        <div id="menu">
            <div id="about">
                 <div id="dd_about"></div>
            </div> 
        </div>
    </div>
  
   
</div>

CSS

#container {
    width:500px;
    margin:0 auto;
    position:relative;    
}

#header {
    width:100%;
    height:50px;
    background:blue;
    position:relative;
}

#boundary {
    width:320px;
    height:60px;
    bottom:0;
    right:0;
    position:absolute;
    background:purple;
       
}

#menu {
     width:100px;
     height:40px;
     position:absolute;
     right:10px;
     top:10px;   
}

#about {
    width:100px;
    height:40px;
    float:left;
    background:yellow;
    
 }

#dd_about  {
   top : 40px;
   left : 0px;
   width:100px;
   height:200px;
   position:absolute; 
   background:red;
   display:none;
} 

#dd_about {right:10px}

JavaScript

var menustate = "hidden";

$('#about').bind('mouseenter', function() {       
    
    if (menustate == "hidden")
    {
        $('#dd_about').slideDown('fast');
        menustate = "shown";
    }
});


$('#about').bind('mouseleave', function () {
      $('#dd_about').slideUp('fast');
    menustate = "hidden";
});