JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navbar">
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
    
    <li class="navbar-item">
        <a href="javascript:;">Parent Link</a>
        
        <ul class="navbar-sub">
            <li class="navbar-sub-item">
                <a href="#url_redirect">One</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Two</a>
            </li>
            
            <li class="navbar-sub-item">
                <a href="#url_redirect">Three</a>
            </li>
        </ul>
    </li>
</ul>

CSS

body {
    margin: 10px;
}

.navbar,
.navbar .navbar-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar > .navbar-item {
    float: left;
}

.navbar > .navbar-item:last-child {
    margin-right: 0;
}

.navbar > .navbar-item.active > .navbar-sub {
    display: block;
}

.navbar > .navbar-item a {
    text-decoration: none;
}

.navbar > .navbar-item > a {
    background-color: #999;
    padding: 10px 20px;
    color: #696969;
    display: block;
}

.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
    background-color: #ccc;
}

.navbar .navbar-sub {
    display: none;
}

.navbar .navbar-sub > .navbar-sub-item > a {
    color: #ccc;
    display: block;
    padding: 5px 10px;
    text-align: center;
    background-color: #696969;
}

.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
    background-color: #999;
}

JavaScript

$('.navbar').on('mouseenter focusin', '.navbar-item > a', function (e) {
    $(this)
        .parent('.navbar-item')
        .addClass('active')
        .siblings('.navbar-item')
        .removeClass('active')
});