JSFiddle - React, Tailwind, and code Playground

by WORKMAN

HTML

<nav>
  <ul class="topmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="" class="down">Blog</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="" class="down">Portfolio</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  display: block;
  text-decoration: none;
  outline: none; 
}
.topmenu {
  backface-visibility: hidden;
  background: rgba(255,255,255,.8);
}
.topmenu > li {
  display: inline-block;
  position: relative;
}
.topmenu > li > a {
  font-family: 'Exo 2', sans-serif;
  height: 70px;
  line-height: 70px;
  padding: 0 30px;
  font-weight: bold;
  color: #003559;
  text-transform: uppercase;
  transition: .4s ease-in-out;
}
.down:after {
  content: "\f107";
  margin-left: 8px;
  font-family: FontAwesome;
}
.topmenu li a:hover {color: #E6855F;}
.submenu {
  background: white;
  border: 2px solid #003559;
  position: absolute;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  width: 150px;
  transform: perspective(600px) rotateX(-90deg);
  transform-origin: 0% 0%;
  transition: .6s ease-in-out;
}
.topmenu > li:hover .submenu {
  visibility: visible;
  opacity: 1;
    transform: perspective(600px) rotateX(0deg);
}
.submenu li a {
  color: #7f7f7f;
  font-size: 13px;
  line-height: 36px;
  padding: 0 25px;
  font-family: 'Kurale', serif;
  transition: .4s ease-in-out;
}