JSFiddle - React, Tailwind, and code Playground

HTML

<idiv 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>
        </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 > 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 {
    display: none;
}


/* 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;
         -o-transition: background .5s ease;
            transition: background .5s ease;
}
#prova > ul li:hover {
    -webkit-transition: background .5s ease;
       -moz-transition: background .5s ease;
        -ms-transition: backgroundl .5s ease;
         -o-transition: background .5s ease;
            transition: background .5s ease;
            background: rgba(0, 0, 0, 0.8);
}
#prova > ul > li > ul {
    margin-left: -10px;
    margin-top: 5px;
    min-width: 150px;
}

#prova > ul > li > ul > li { background: rgba(0,0,0,0.5); }