JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="header">
        <div id="boundary"></div>
        <div id="menu">
            <div id="about"></div> 
        </div>
    </div>
  
    <div id="dd_about"></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:50px;
   width:100px;
   height:200px;
   position:absolute; 
   background:red;
   display:none;
} 

#dd_about {right:10px}

JavaScript

$('#about').bind('mouseenter', function() {       
    
    if ($('#dd_about').is(":hidden")) {      
        // if it hasn't been dropped down yet... 
        $('#dd_about').slideDown('fast');
      
    }else {
        // if it has already fired just show it...
        // not working
       $('#dd_about').css('display', 'block');
    };  


});



$('#boundary').bind('mouseenter', function () {
      $('#dd_about').slideUp('fast');
});    


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