JSFiddle - React, Tailwind, and code Playground

HTML

<div id="prova">
			<ul>
				<li>
					<a href="#">#0</a>
				</li>
			

			
				<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></tr></table>
                    </ul><ul>
                            <li><a href="#">1.4</a></li>
                            <li><a href="#">1.5</a></li>
                            <li><a href="#">1.6</a></li>
                    </ul><ul>
                            <li><a href="#">1.7</a></li>
                            <li><a href="#">1.8</a></li>
                                <li><a href="#">1.9</a></li>

						</ul>
				</li>

				<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

/* Gears */
#prova{
width: auto;
height: 31px;
border: 0px;
float:center;
list-style:none;
padding-left:20px;
/*    background: green; se imposto questo background cambia l'illuminazione sui tasti 1,2,3,4 in maniera sbagliata, togli /* per vedere cosa intendo*/
}
#prova ul {
color:#000;/*colore caratteri del primo menu, che qui non riesco a far funzionare*/
list-style-type: none;
float: center;
margin: 0;
padding: 0;
border: 0;
font:20px Charlemagne;/*grandezza voci che contengono sottomenu*/
z-index: 1;
}
#prova > ul > li {
display: inline;/*SECONDO rettangolo INTERNO*/
float:left;
width:140px;
margin: auto;
padding: 0;
border: 0;
color: #6fc5f6;
text-align: center; /*creato per influenzare la posizione del testo del pirmo menu*/
background: #6fc5f6;
}
#prova > ul > li > ul {
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
}
#prova > ul > li:hover > ul {/*non ho capito a che serve, ma se levato non funziona l'apertura sottomenu*/
    max-height: 100000px;
}
#prova > ul > li > ul > li {
    display: block;
    font: normal 13px Verdana;
margin:0;
padding:0;
text-align: left;
visibility: visible;
}
#prova > ul > li > ul {
    -webkit-transition: .5s all;
    -webkit-transition-delay: .5s;
    -moz-transition: .5s all;
    -moz-transition-delay: .5s;
    -ms-transition: .5s all;
    -ms-transition-delay: .5s;
    -o-transition: .5s all;
    -o-transition-delay: .5s;
    transition: .5s all;
    transition-delay: .5s;
}


#prova > ul > li > ul:nth-child(3) { margin-left: 140px; }
#prova > ul > li > ul:nth-child(4) { margin-left: 290px; }
#prova > ul > li > ul:nth-child(5) { margin-left: 440px; }
#prova > ul > li > ul:nth-child(6) { margin-left: 590px; }

#prova > ul > li:hover > ul {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

#prova > ul:hover > li:not(:hover) > ul {
    display: none;
}


/* Styles */

#prova...