JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="togglevisibility">Toggle Me 1
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
    <li class="togglevisibility">Toggle Me 2
        <ul> 
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </li>
    <li class="togglevisibility">Toggle Me 3
        <ul> 
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </li>
</ul>

JavaScript

$("li>ul").hide();

$(".togglevisibility")
  .mouseenter(function() {
    $(this).children("ul").slideDown();
  })
  .mouseleave(function() {
    $(this).children("ul").slideUp();
  });