JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">Header</div>
<div id="content">Content</div>

CSS

#header
{
    width: 300px;
    border: 1px solid #000;
}

#content
{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    display:none;
    position: relative;
}

JavaScript

$('#header').hover(FadeMenuIn, FadeMenuOut);

function FadeMenuIn(ID) {
    $('#content').stop(true, true).slideDown('slow');
}

function FadeMenuOut(ID) {
    $('#content').stop(true, true).slideUp('slow');
}