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 class="row4">
                <li><a href="#">B Uno</a> 
                </li>
                <li><a href="#">B Due</a>
                </li> 
                <li><a href="#">B Tre</a>
                </li>
                <li><a href="#">B Quattro</a> 
                </li>
                <li><a href="#">B Cinque</a>
                </li> 
                <li><a href="#">B Sei</a>
                </li>
                <li><a href="#">B Sette</a> 
                </li>
                <li><a href="#">B Otto</a>
                </li> 
                <li><a href="#">B Nove</a>
                </li>
                <li><a href="#">B Sette</a> 
                </li>
                <li><a href="#">B Otto</a>
                </li> 
                <li><a href="#">B Nove</a>
                </li>
                <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 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#prova > ul > li {
    display: inline-block;
    padding: 0 10px;
}

#prova ul li a { display: block; widht: 100%; height: 100%; }

#prova > ul > li > ul {
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
}
#prova > ul > li:hover > ul {
    max-height: 100000px;
}
#prova > ul > li > ul > li {
    display: block;
}
#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: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 {
     -webkit-transition: 0s all !important;
    -webkit-transition-delay: 0s !important;
    -moz-transition: 0s all !important;
    -moz-transition-delay: 0s !important;
    -ms-transition: 0s all !important;
    -ms-transition-delay: 0s !important;
    -o-transition: 0s all !important;
    -o-transition-delay: 0s !important;
    transition: 0s all !important;
    transition-delay: 0s !important;
}

.row4 { height: 96px; font-size: 0px !important; }
.row4 li { display: inline-block !important; width: 150px; font-size: 14px; }

/* Styles */
#prova > ul {
    font-size: 0px;
}
#prova > ul * {
    font-size: 20px;
    color: white;
}
#prova a {
    text-decoration: none;
    font-family: Arial;
    text-transform: uppercase;
}
#prova > ul > li, nav li {
                height: 20px;
            background: rgba(0, 0, 0, 1);
               padding: 10px;
    -webkit-transition: background .5s ease;
       -moz-transition: background .5s ease;
        -ms-transition: background .5s ease;
  ...