JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="main" role="main">
    <ul id="menu2" class="menu">
        <li tabindex="0">
            Fly
            <ul class="submenu fly">
                <li>sub-One</li>
                <li>sub-Two</li>
                <li>sub-Three</li>
                <li>sub-Four</li>
                <li>sub-Five</li>
                <li>sub-Six</li>
                <li>sub-Seven</li>
            </ul>
</li>
  </ul>
        </div>

CSS

.menu, .menu ul {
  list-style: none;
  padding: 0;
}

.menu ul {
  margin: 0;
}

.menu > li {
  position: relative;
  display: inline-block;
  outline: 0;
}

.submenu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 0;
  overflow: hidden;
  max-height: 0;
  /* The transition-delay prevents the menu to disappear before the transition is run backward
   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) */
  -webkit-transition: max-height 1ms linear 1s;
     -moz-transition: max-height 1ms linear 1s;
  /* A .submenu should be only revealed when hovering the .menu */
  pointer-events: none;
}

.menu > li:hover .submenu, .menu > li:focus .submenu {
  pointer-events: auto;
  z-index: 10;
  max-height: 2000px;
  -webkit-transition: none;
     -moz-transition: none;
}

/* Progressive Anim
 * ==================================================================
 * This is a lot of redundant code but the result is worth it
 * This should be edited for menus with more or much less than 8 items 
 */


/* Default
 ================================================================= */
.submenu li {
  opacity: 0;

  -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
     -moz-transition: opacity .4s,    -moz-transform .6s, max-height .6s;
      -ms-transition: opacity .4s,     -ms-transform .6s, max-height .6s;
       -o-transition: opacity .4s,      -o-transform .6s, max-height .6s;
          transition: opacity .4s,         transform .6s, max-height .6s;
}

.menu > li:hover .submenu li, .menu > li:focus .submenu li {
  opacity: 1;

  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}

/* Fly
 ================================================================= */
.fly {
  -webkit-perspective: 400px;
     -moz-perspective: 400px;
      -ms-perspective: 400px;
       -o-perspective: 400px;
          perspective: 400px;
}

.fly li {
 ...