JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

<ul>
  <li>item 1
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
    </ul>
  </li>
  <li>item 3
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
    </ul>
  </li>
</ul>

CSS

li:not(:hover) ul {
    max-height: 0;
    overflow: hidden;
}

li ul {
    background: #d5d5d5;
    max-height: 500px;
    transition: max-height 2s ease-in;
}