JSFiddle - React, Tailwind, and code Playground

HTML

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

        </li>
        <li> <a href="#">Due &gt;&gt;</a>

            <ul>
                <li><a href="#">B Uno</a> 
                </li>
                <li><a href="#">B Due</a>
                </li> 
                <li><a href="#">B Tre</a>
                </li>
            </ul>
            <ul>
                <li><a href="#">B Quattro</a> 
                </li>
                <li><a href="#">B Cinque</a>
                </li> 
                <li><a href="#">B Sei</a>
                </li>
            </ul>
            <ul>
                <li><a href="#">B Sette</a> 
                </li>
                <li><a href="#">B Otto</a>
                </li> 
                <li><a href="#">B Nove</a>
                </li>
            </ul>
            <ul>
                <li><a href="#">B Sette</a> 
                </li>
                <li><a href="#">B Otto</a>
                </li> 
                <li><a href="#">B Nove</a>
                </li>
            </ul>
            <ul>
                <li><a href="#">B Sette</a> 
                </li>
                <li><a href="#">B Otto</a>
                </li> 
                <li><a href="#">B Nove</a>
                </li>
            </ul>
        </li>
         
        <li> <a href="#">Tre</a>

        </li>
        
        <li class="hide"> <a href="#">Quattro &gt;&gt;</a>

            <ul>
                <li><a href="#">C Uno</a> 
                </li>
                <li><a href="#">C Due</a>
                </li> 
                <li><a href="#">C Tre</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...