JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
  <li class="main"><a href="http://www.google.com">Main Item</a>
    <ul>
      <li class="sub"><a href="http://www.google.com">Sub 1</a></li>
	  <li class="sub"><a href="http://www.google.com">Sub 2</a></li>
    </ul>
  </li>
</ul>

CSS

ul#nav {
  position:relative;
  display: inline; 
  list-style-type: none;
  font-family: Helvetica;  
  padding: 15px 5px 15px 0;
}
li.main {
  position: relative;
  width: 250px;
  font: 14px Roboto;
  display: inline-block;
  background: #eef4ff;
  margin-right: -4px;
  cursor: pointer;
  z-index: 1;
  -webkit-transition: all 0.2s;
}
li.main a {
  display: block;
  padding: 15px 90px;
  color: inherit;
  text-decoration: none;
}
li.main:hover {
  background: #548cff;
  color: #FFFFFF;
}
li.main ul {
  position: absolute;
  top: 0px;
  left:-40px;
  display: block;
  list-style-type: none;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
li.main:hover ul {
  top: 47px;
  visibility: visible;
  display: block;
  opacity: 1;
  -webkit-transition: all 1s;
}
li.sub {
  width: 225px;
  background: #6F6F6F;  
  color: #F0F0F0;
  opacity: .985;
}
li.sub a {
  background:inherit;
  color: inherit;
  display: inline-block;
  padding: 17px 90px;
  text-decoration:none;
}
li.sub:hover { 
  background: #888888; 
  color: #FFFFFF;
}