JSFiddle - React, Tailwind, and code Playground

by Niels Harbo

HTML

<ul class="menu">
  <li>
    <a href="#">Menu Item</a>
    </li>
  <li class="has-children">
    <a href="#">Menu Item</a>
    <ul class="dropdown">
      <li><a href="#">Sub-menu item</a></li>
      <li><a href="#">Sub-menu item</a></li>
      <li><a href="#">Sub-menu item</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Item</a>
  </li>
  <li class="has-children">
    <a href="#">Menu Item</a>
    <ul class="dropdown">
      <li><a href="#">Sub-menu item</a></li>
      <li><a href="#">Sub-menu item</a></li>
      <li><a href="#">Sub-menu item</a></li>
    </ul>
  </li>
</ul>

CSS

ul{
  list-style: none;
  position: relative;
  padding: 0;
}
ul.menu{
  text-align:center; 
  margin: 0;  
  background:red;
}
ul.menu>li{
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0;
  line-height:130%;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
}
.has-children>a:after{
  content:" ˅ ";  
}
ul.menu>li>a{
    position: relative;
    display: block;
    padding: 0px 17px;
    margin: 0px;
    text-decoration:none;
    color:#fff;
}
ul.dropdown{
  position: absolute;
  top:100%;
  min-width: 205px;
  background: #ffffff;
  box-shadow: 0px 4px 13px -3px #808080;
  left: 0px;
  text-align:left;
  overflow: hidden;
  display: block;
  max-height: 0px;
  max-width: 0px;
  opacity: 0;
  transform-origin: 0% 0%;
  transform: perspective( 600px ) rotateX( -90deg );
  transition: transform 0.5s ease, opacity 0.6s ease, max-height 0.6s step-end, max-width 0.6s step-end, padding 0.6s step-end;
  -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
  backface-visibility: hidden;
  z-index:10;
}
ul.menu>li.has-children:hover ul.dropdown{
  display: block;
  overflow: visible;
  max-height: 3000px;
  max-width: 3000px;
  opacity: 1;
  transform: perspective( 600px ) rotateX( 0deg );
  transition: transform 0.5s ease, opacity 0.2s ease, max-height 0s step-end, max-width 0s step-end, padding 0s step-end;
}

ul.dropdown a{
  color:#000;
  text-decoration:none;
  display: block;
  padding: 6px 12px;
  margin: 0px;
  position: relative;
  border-bottom: 1px solid #aaa;
}