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

$('#about').bind('mouseenter', function() {       
   
        $('#dd_about').slideDown('fast');
});


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