JSFiddle - React, Tailwind, and code Playground
HTML
<div id="prova">
<ul>
<li>
<a href="#">#0</a>
</li>
</ul>
<ul>
<li>
<a href="#">#1</a>
<ul>
<table cellspacing="0"; cellpadding="0";>
<tr><td><li><a href="">1.1</a></li></td>
<td><li><a href="">1.2</a></li></td>
<td><li><a href="">1.3</a></li></td>
<td><li><a href="">1.4</a></li></td>
<td><li><a href="">1.5</a></li></td>
</tr>
<tr>
<td><li><a href="">1.6</a></li></td>
<td><li><a href="">1.7</a></li></td>
<td><li><a href="">1.8</a></li></td>
<td><li><a href="">1.9</a></li></td>
<td><li><a href="">1.10</a></li></td>
</tr>
</table>
</ul>
</li>
</ul><ul>
<li>
<a href="#">#2</a>
<ul>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
<li><a href="#">2.4</a></li>
<li><a href="#">2.5</a></li>
</ul>
</li>
</ul>
</div>
CSS
#prova{
width: auto;
height: 31px;
border: 0px;
background: green;
float:center;
list-style:none;
padding-left:20px;
}
#prova ul {
color:#000;
list-style-type: none;
float: center;
margin: auto;
padding: 0;
border: 0;
font:20px Charlemagne;
z-index: 1;
}
#prova ul li a:hover,
#prova ul li a:focus,
#prova ul li a:active{
background: red;
color: #ffffff;
text-decoration: none;
}
#prova ul li a:link,
#prova ul li a:visited{
display: block;
padding: 3.5px 16px;
color: #000;
text-decoration: none;
}
#prova ul li {
display: inline;
float:left;
width:140px;
margin: auto;
padding: 0;
border: 0;
color: #6fc5f6;
text-align: center;
background: green;
}
#prova ul li:hover ul {
display: block;
position: absolute;
width:140px;
padding: 0;
margin: auto;
border: 0px;
font-size:10px;
visibility: visible;
}
#prova ul li ul{
display: none;
visibility: visible;
}
#prova ul li ul li {
font: normal 13px Verdana;
margin:0;
padding:0;
text-align: left;
visibility: visible;
}
#prova ul li ul li a:hover,
#prova ul li ul li a:focus,
#prova ul li ul li a:active {
background:red;
}
#prova ul li ul li a:link,
#prova ul li ul li a:visited{
display: block;
color: #000;
text-decoration: none;
}