JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a href="#" id="menu1">Menu 1</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>

    <a href="#" id="menu2">Menu 2</a>
    <ul>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
    </ul>

    <a href="#" id="menu3">Menu 3</a>
    <ul>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
    </ul>
</div>

CSS

div {
    position: relative;
}

div > a {
    background: #333;
    color: #fff;
    display: block;
    float: left;
    height: 50px;
    line-height: 50px;
    width: 100px;
    margin-right: 1px;
    text-align: center;
    text-decoration: none;   
}

a:hover {
    background: #555;   
}

ul {
    background: #ddd;  
    position: absolute;
    width: 100%;
    top: 50px;
}

ul a {
    background: #eee;
    color: #333;
    float: none;
}

ul a:hover {
    background: #ccc;
    color: #333;
}

JavaScript

$(document).ready(function(){
    $('ul').hide();
    $('div > a').click(function(){
        $('ul').slideUp(500);
        $(this).addClass('current').next('ul').slideDown(500);
    });
});