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

CSS

li {
    margin-left: 1em;
}
a.show-anyway
{
  display: block;
}
a.world
{
  display: none;
}
.active>a
{
  display: inline;
}

JavaScript

$(document).ready(function() {
  $('.currentlist li').hover(function() {
    $(this).addClass('active');
    $(this).parents('li').removeClass('active');
  }, function() {
    $(this).removeClass('active');
    $(this).parents('li').addClass('active');
  });
});