JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_container">
	<ul id="main_menu" class="menu">
		
	 <li id="main_empresa"><a href="#"><span>Empresa</span></a>
	  
	  <ul class="links">	  	
	  	<li id="cp_empresas"><a href="#"><span>Empresas</span></a>
	  		<ul class="links">
	  			<li><a class="link-menu" control="empresas" rel="action=new" >Adicionar</a></li>
	  			<li><a class="link-menu" control="empresas">Consultar</a></li>
	  			<li><a class="link-menu" control="calendar">Calendário</a></li>
	  		</ul>
	  	</li> <!-- #cp_empresas -->

	  	<li id="cp_operadores"><a href="#"><span>Operadores</span></a>
	  		<ul class="links">
	  			<li><a class="link-menu" control="operadores" rel="action=new">Adicionar</a></li>
	  			<li><a class="link-menu" control="operadores">Consultar</a></li>
	  			<li><a class="link-menu" control="operadores" rel="action=audit">Auditoria</a></li>
	  		</ul>
	  	</li> <!-- #cp_operadores -->	  	
	  	
	  	<li><a class="link-menu" control="setores">Setores</a></li>

	  	<li id="cp_contas"><a href="#"><span>Contas</span></a>
	  		<ul class="links">
	  			<li><a class="link-menu" control="contas" rel="action=new">Adicionar</a></li>
	  			<li><a class="link-menu" control="contas">Consultar</a></li>
	  		</ul>
	  	</li> <!-- #cp_contas -->

	  	<li><a class="link-menu" control="smtps">Servidores SMTP</a></li>
			<li><a class="link-menu" control="smss">Servidores SMS</a></li>
	  </ul>	 
 
  </li> <!-- #main_empresa -->

	 <li><a href="#"><span>Cadastro</span></a>
	   <ul class="links">
	  	<li id="cp_clientes"><a href="#"><span>Clientes</span></a>
	  		 <ul class="links">
	  		 	<li><a class="link-menu" control="clientes" rel="action=new">Adicionar</a></li>
	  		 	<li><a class="link-menu" control="clientes">Consultar</a></li>
	  		  <li><a class="link-menu" control="clientes" rel="action=rel">Relatórios</a></li>	  		 	
	  		  <li><a class="link-menu" control="clientes" rel="action=load">Estatísticas</a></li>			  		 
	  		 </ul>
	   </li> <!-- #cp_clientes -->
	  		
	  <li><a...

CSS

div {display:block; clear:both;}
/** Menu Section **/
ul.menu ul{display:none !important;}
ul.menu li:hover>ul{display:block !important;}
ul.menu ul{position:absolute;left:-1px;top:98%;}
ul.menu ul ul{position:absolute;left:98%;top:-2px;}
ul.menu, ul.menu ul {
	margin:0;
	list-style:none;
	padding:2px;
}
ul.menu li ul.links {
	margin:0;
	list-style:none;
	padding:0;
	border-color:#AAAAAA;
	border-width:1px;
	border-style:solid;
}
ul.menu ul.links li {
	margin:0px;
	list-style:none;
	padding:2px;
	background-color:#F5F5F5;
	background-repeat:repeat;
}
ul.menu table {border-collapse:collapse}ul.menu {
	display:block;
	float: left;
}
ul.menu ul{
	width:160.65px;
}
ul.menu li{
	display:block;
	margin:0;
	font-size:0px;
	margin-right:4px;
}
ul.menu a:active, ul.menu a:focus {
outline-style:none;
}
ul.menu a, ul.menu li.dis a:hover, ul.menu li.sep a:hover {
	display:block;
	vertical-align:middle;
	border-width:0px;
	border-color:#6655ff;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:3px;
	font-family: Arial, Helvetica, Verdana;
	font-size: 11px;
	color:#000;
	text-decoration:none;
	cursor:default;
	border:1px solid transparent;
}
ul.menu ul.links a {
	display:block;
	vertical-align:middle;
	background-color:#F5F5F5;
	border-width:0px;
	border-color:#6655ff;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	font:normal 11px Verdana;
	color: black;
	text-decoration:none;
	cursor:default;
	border:1px solid transparent;
}
ul.menu span{
	display:none;
	overflow:hidden;
}
ul.menu li {
	display:block;
	float:left;
}
ul.menu ul li{
	float:none;
}
ul.menu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.menu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.menu li.sep span{
	float:none;	padding-right:0;
	width:5px;
	height:16px;
	display:inline-block;
	background-color:#AAAAAA;	background-image:none;}
	
ul.menu ul li.sep span{
	width:80%;
	height:3px;
}
ul.menu...