JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menutop">
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Hover here</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
</ul>

CSS

#menutop 
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#menutop a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#menutop li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#menutop li:hover > a
{
	color:blue !important
}
#menutop ul li:hover > a
{
	color:green !important
}

#menutop ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#menutop ul li
{
	list-style:none;
    float:none;
	width:200px
}

#menutop ul a
{
	line-height:120%;
	padding:10px 15px
}



#menutop li:hover > ul
{
	display:block
}