JSFiddle - React, Tailwind, and code Playground

by btevfik

HTML

<ul id="nav">
    <li><a href="#" target="_self">HOME</a></li>
    <li class="dropdown"><a href="#" target="_self">SYSTEM MANAGER<span aria-hidden="true" data-icon="&#xe000;"></span></a>
        <ul>
             <li><a href="#" target="_blank">Link 1</a></li>
        </ul>
    </li>
</ul>

CSS

li.dropdown.hilight > a {
  color: red;
}

JavaScript

$('.dropdown').on('mouseenter mouseleave', function(e){
        e.preventDefault();
        if (e.type === 'mouseenter')
            $(this).addClass('hilight');
        else
            $(this).removeClass('hilight');
    });