JSFiddle - React, Tailwind, and code Playground

by Vitorino fernandes

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

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

JavaScript

$('.menu a').hover(function () {
        var a = $(this).attr('href').slice(1)
        $('.submenu div').removeClass('active');
        $('.submenu .' + a).addClass('active')
    })

    $('.menu a').on('mouseleave', function () {
        $('.submenu div').removeClass('active');
    })