JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<div class="sub">
    <ul>  
        <li><a href="#">a</a>
            <ul>
                <li><a href="#">b</a>
                    <ul>
                        <li><a href="#">c</a></li>
                        <li><a href="#">d</a></li>
                        <li><a href="#">e</a></li>
                    </ul>
                </li>
                <li><a href="#">f</a></li>
                <li><a href="#">g</a></li>
            </ul>
        </li>
        <li><a href="#">h</a></li>
        <li><a href="#">i</a></li>
        <li><a href="#">j</a></li>
    </ul>
</div>

CSS

.prev {
    color: yellow;
}
.next {
    color: orange;
}

JavaScript

var $a = $('.sub li > a');

$a.each(function(index) {
    $(this).mouseenter(function() {
        var prev = (index - 1 >= 0) ? $a.eq(index - 1).addClass('prev') : $();
        var next = $a.eq(index + 1).addClass('next');
        $a.not(prev).not(next).removeClass('prev next');
    });
});