JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="currentlist">
    <li><a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a></li>
    <li>
        <a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a>
        <ul>
            <li><a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a></li>
            <li><a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a></li>
        </ul>
    </li>
    <li><a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a></li>
    <li>
        <a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a>
        <ul>
            <li><a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a></li>
            <li><a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a></li>
        </ul>
    </li>
    <li><a href="#" class="show-anyway">hello</a> <a href="#" class="world">world</a></li>
</ul>

CSS

li
{
    padding: 5px;
    border: 1px solid #ccc;
}

a.show-anyway
{
    display: inline;
}

a.world
{
    display: none;
}

a.active
{
    display: inline;
}

JavaScript

$(document).ready(function() {
    $('.currentlist li').hover(function() {
        $(this).find('> a.world').addClass('active');
        $(this).parent().parent().find('> a.world').removeClass('active');
    }, function() {
        $(this).find('> a.world').removeClass('active');
        $(this).parent().parent().find('> a.world').addClass('active');
    });
});