JSFiddle - React, Tailwind, and code Playground

by Nimitt Shah

HTML

<div id="menu">
    <a>hover me</a>
    <div id="lolcat-container">
      <ul class="lolcat">
          <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
      </ul>
    </div>
    <div>
      Content
    </div>
</div>

CSS

#lolcat-container{
  overflow:hidden;
}

.lolcat
{
    border:1px solid black;
    background:red;
    color:white;
    margin-top:-100%;
    animation-direction: reverse;
    animation:1s 1 alternate forwards close;
}

#menu:hover .lolcat
{
    animation:1s 1 alternate forwards open;
}

@keyframes open {
  0% {
    margin-top:-100%;
  }
  100% {
    margin-top:0%;
  }
}

@keyframes close {
  0% {
    margin-top:0%;
  }
  100% {
    margin-top:-100%;
  }
}