JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation-name">
   <li>
      <a href="#">Main 1</a>
      <ul class="navigation-name">
         <li><a href="#">sub 1</a></li>
         <li><a href="#">sub 2</a></li>
         <li><a href="#">sub 3</a></li>
         <li><a href="#">sub 4</a></li>
      </ul>
   </li>
   <li>
      <a href="#">Main 2</a>
      <ul class="navigation-name">
         <li><a href="#">sub 1</a></li>
         <li><a href="#">sub 2</a></li>
      </ul>
   </li>
</ul>

CSS

.navigation-name,
.navigation-name ul,
.navigation-name li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style-type: none;
	z-index: 9;
}

.navigation-name a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	font-size: 11.6px;
	font-weight: normal;
	width: 145px;
	padding: 6px;
}

.navigation-name li {
	background: #ffffff;
	border: 0px solid #f1f1f1;
	float: left;
	background: #00ac5b;
}


/** hide fly-outs initially **/

.navigation-name li ul {
	position: absolute;
	top: -1000px;
}


/** fly-out styling **/

.navigation-name ul li {
	display: block;
	float: none;
}

.navigation-name li:hover>ul {
	position: absolute;
	top: 100%;
	left: 0px;
}


/** hover styling **/

.navigation-name li:hover>ul {
	display: block;
}

.navigation-name li:hover {
	background-color: #ffffff;
}

.navigation-name li:hover>a {
	color: #00ac5b;
}