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><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>

CSS

a.show-anyway
{
  display: inline;
}
a.world
{
  display: none;
}
a.active
{
  display: inline;
}

JavaScript

$(document).ready(function() {
  $('.currentlist li').hover(function(evt) {
    $(this).children('a.world').addClass('active');
      evt.stopPropagation()
  }, function(evt) {
    $(this).children('a.world').removeClass('active');
  });
});