JSFiddle - React, Tailwind, and code Playground

HTML

<header>HEADER</header>
<div id="opt-slide"> <span id="toggle">OPTION</span>

    <ul id="dropdown">

    </ul>
</div>

CSS

* {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}
header {
    height:200px;
    background:#39F;
    z-index:4;
}
#opt-slide {
    width:300px;
}
#toggle {
    background:#099;
    display:block;
    height:50px;
    color:#FFF;
    line-height:50px;
    z-index:4;
}
#dropdown {
    background:#0C9;
    list-style:none;
    margin-top:0px;
    z-index:2;
    display:none;
}
#dropdown li {
    height:40px;
    line-height:40px;
}
#dropdown li:hover {
    background:#FAFAFA;
}

JavaScript

$('#toggle').click(function () {
    $('#dropdown').slideToggle();
    $('#opt-slide').toggleClass('open');
});

$('#dropdown ').click(function () {
    $('#dropdown').slideUp();
    $('#opt-slide').removeClass('open');
});