JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <ul>
        <li><a href="/dropdown1">item1</a>
        </li>
        <li><a href="/dropdown2">item2</a>
        </li>
        <li><a href="/dropdown3">item3</a>
        </li>
    </ul>
</div>
<div class="submenu">
    <div class="dropdown1">content1</div>
    <div class="dropdown2">content2</div>
    <div class="dropdown3">content3</div>
</div>

CSS

* {
    margin: 0px;
}
.menu ul {
    display:block;
    width:100%;
    list-style:none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.menu li {
    float:left
}
.menu a {
    background:gray;
    padding:5px;
    margin-right:1px;
    line-height: 30px;
    display: block;
}
.menu a.active {
    background: black;
}
.submenu div {
    display:none;
    background: red;
}

JavaScript

$('.menu a').on({
    mouseenter: function () {
        var link = $(this).attr('href').substring(1);
        $(this).addClass('active');
        $('.submenu').find('.' + link).show();
    },
    mouseleave: function () {
        var link = $(this).attr('href').substring(1);
        $(this).removeClass('active');
        $('.submenu div').hide();
    },
    click: function (e) {
        e.preventDefault();
    }
});

$('.submenu div').on({
    mouseenter: function () {
        var link = $(this).attr('class');
        $('.menu a[href="/'+link+'"]').addClass('active');
        $(this).show();
    },
    mouseleave: function () {        
        $('.menu a').removeClass('active');
        $('.submenu div').hide();
    }
});