JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<ul>
  <li class="list">
    <a href="#">Hover over me</a>
    <ul>
      <li>Hey</li>
      <li>This</li>
      <li>is</li>
      <li>just</li>
      <li>a</li>
      <li>test</li>
    </ul>
  </li>
</ul>

CSS

.list li {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.list:hover li {
  min-height: 20px;
  opacity: 1;
}