JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sf-menu">
    <li id='education'><a>Education</a>
        <ul>
            <li class='education' id='6'><a href='#' title='Desktops'>Desktops</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='9'><a href='#' title='#'>#</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='11'><a href='#' title='#'>#</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='14'><a href='#' title='#'>#</a>
                <ul>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul li[id] {
    background: #CCC;
}

JavaScript

$(document).ready(function() {
    $('ul.sf-menu li li li').hover(function() {
        //alert(1)
        $(this).parents('li').first().css({'backgroundColor': 'pink'});
    }, function() {
        $(this).parents('li').first().css({'backgroundColor': ''});
    });
});