JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainmenu">
<ul>
<li>
<a href="#">MENU 1</a>
<ul class="nav1">
<li><a href="#">DROP DOWN 1</a></li>
<li>
<ul class="nav2">
<li><a href="#">FLY OUT 1</a></li>
<li><a href="#">FLY OUT 2</a></li>
</ul>
</li>
<li><a href="#">DROP DOWN 2</a></li>
<li><a href="#">DROP DOWN 3</a></li>
</ul>
</li>
<li>
<a href="#">MENU 2</a>
<ul class="nav1">
<li><a href="#">DROP DOWN 1</a></li>
<li><a href="#">DROP DOWN 2</a></li>
<li><a href="#">DROP DOWN 3</a></li>
</ul>
</li>
<li>
<a href="#">MENU 3</a>
<ul class="nav1">
<li><a href="#">DROP DOWN 1</a></li>
<li><a href="#">DROP DOWN 2</a></li>
<li><a href="#">DROP DOWN 3</a></li>
</ul>
</li>
</ul>
</div>

CSS

#mainmenu{
width: auto;
height: 30px;
}
#mainmenu{
margin: 0px;
padding: 0px;
}
#mainmenu li{
float:left;
position:relative;
width: 140px;
border: 1px solid #000;
list-style: none;
background: #336699;
font-family: verdana;
font-size: 14px;
font-weight: bold;
text-align: center;
padding: 3px 10px 3px 10px;
}
#mainmenu li a{
background: #336699;
text-decoration: none;
color: #000;
}
#mainmenu li a:hover{
color: #ff0000;
}
.nav1{
width: 140px;
margin: 0px;
padding: 0px;
}
#mainmenu li ul.nav1{
display:none;
position:absolute;
list-style: none;
top: 23px;
left: 0;
}
#mainmenu li:hover ul.nav1{
display: block;
width: 140px;
}
#mainmenu li ul.nav1 li {
background: #fff;
text-decoration: none;
font-size: 11px;
}
#mainmenu li ul.nav1 li a{
background: #fff;
text-decoration: none;
font-size: 11px;
color: #000;
}
#mainmenu li ul.nav1 li a:hover{
color: #ff0000;
}
#mainmenu li ul.nav1 li ul.nav2 li{
font-size: 8px;
color: #fffab8;
}
#mainmenu li ul.nav1 li ul.nav2 li a{
color: #000;
}
#mainmenu li ul.nav1 li ul.nav2 li a:hover{
color: #ff0000;
}
#mainmenu ul.nav1 li ul.nav2{
display:none;
position:absolute;
list-style: none;
top: -1px;
left: 120px;
}
#mainmenu ul.nav1 li:hover ul.nav2{
display: block;
width: 140px;
}