JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div id="header-line"></div>
<div id="parent">
    <div id="main-menu">Expands on hover</div>
    <div id="content"></div>
</div>

CSS

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#parent{
    position:relative;
}
#main-menu {
    height: 30px;
    background-color: green;
    width:100%;
    position:absolute;
    top:0;
    z-index:100;
}
#content {
    background-color: blue;
    height: 200px;
    width:100%;
    position:absolute;
    /* take into account : borders, margin, previous sibling height */
    top:30px;
}

JavaScript

$("#main-menu").hover(function () {
    $(this).stop(true, false).animate({
        height: "100px"
    });
}, function () {
    $(this).stop(true, false).animate({
        height: "30px"
    });
});