JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="nav1">YouTube</a>
<a href="#" id="nav2">Twitch</a>
<div id="navwrapper"> <span id="dropdown1"><a href="#">Sodapoppin</a> <a href="#">Gronkh</a> <a href="#">Deine Mama</a></span>
<span id="dropdown2"><a href="#">Deine Mama</a> <a href="#">Gronkh</a> <a href="#">Sodapoppin</a></span>
</div>

CSS

a {
    display: inline-block;
    text-decoration: none;
}
#navwrapper {
    background-color: #ff0000;
    height: 120px;
    position: relative;
}
#dropdown1, #dropdown2 {
    padding: 10px 25px;
    color: rgba(0, 0, 0, 0.8);
    position: absolute;
}
#dropdown1 a, #dropdown2 a { color: rgba(0, 0, 0, 1); }

JavaScript

var nav1 = $('#nav1');
var nav2 = $('#nav2');
var dropdown1 = $('#dropdown1');
var dropdown2 = $('#dropdown2');
var navwrapper = $('#navwrapper');
var allDropdowns = $('#dropdown1, #dropdown2');
var duration = 300;
allDropdowns.hide();
navwrapper.hide();
nav1.click(function () { toggleFade(dropdown1); });
nav2.click(function () { toggleFade(dropdown2); });
function toggleFade(dropdown) {
    if (!dropdown.is(':visible')) {
        allDropdowns.fadeOut(duration);
        navwrapper.slideDown(duration);
        dropdown.fadeIn(duration);
    } else {
        allDropdowns.fadeOut(duration);
        navwrapper.slideUp(duration);
    }
}