JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li><a href="#">Main1</a></li>
    <li><a href="#">Main2</a></li>
    <li><a href="#">Main3</a>
        <ol class="sub-menu">
            <li><a href="#">Sub1</a></li>
            <li><a href="#">Sub2</a></li>
            <li><a href="#">Sub3</a></li>
        </ol>
  </li>
</ol>

CSS

li, li a {
    color:black;
}

JavaScript

$('ol li a').hover(			
    function () {
        $(this).css({"color":"red"});
        $(this).parent().css({"color":"red"});
    }, 
    
    function () {
        $(this).css({"color":"black"});
        $(this).parent().css({"color":"black"});
    }
);