JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li class="parent"><a href="#">Test 1</a>
    <ul>
        <li><a href="#">Test 1.1</a></li>
        <li><a href="#">Test 1.2</a></li>
        </ul></li>
    <li class="parent"><a href="#">Test 2</a>
    <ul>
        <li><a href="#">Test 2.1</a></li>
        <li><a href="#">Test 2.2</a></li>
        </ul></li>
    <li class="parent"><a href="#">Test 3</a>
    <ul>
        <li><a href="#">Test 3.1</a></li>
        <li><a href="#">Test 3.2</a></li>
        </ul></li>
    </ul>

CSS

#nav { display: block; }
	#nav li { position: relative; width: 130px; display: inline-block }
	#nav ul { margin: 0;  padding: 0; }
	#nav a { background: #474746; color: #FFFFFF; display: block; padding: 0.5em; text-align: center; font-weight: bold;
	text-decoration: none; border-top: 1px solid rgba(255, 255, 255, 0.05); border-left: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(0,0,0,0.2); 
	border-bottom: 1px solid rgba(0,0,0,0.2) }
	#nav a:hover { color: #990000 }
	#nav li.parent > a:after { content: ' ▼'; position: absolute; top: -3px; right: 10px; line-height: 38px }
	#nav li ul { position: absolute; left: -999em }
	#nav li ul li { width: 170px }
	#nav li:hover ul { left: -20px; top: 29px; z-index: 100 }
	#nav li.item156:hover ul { left: -40px }
	#nav li.item167:hover ul { left: 0px }
	#nav ul li.parent > a:after { content: ' ►'; position: absolute; top: -3px; right: 10px; line-height: 38px }
	#nav li li ul { display: none }
	#nav li li:hover ul { display: block; left: 170px !important; top: 0px }
	#nav li:hover { color: #990000 }
.highlighted { color: #990000 }

JavaScript

$(function() {

$('li.parent ul li').hover(function() {
        $(this).parent().closest('li.parent').toggleClass('highlighted');
    

});
});