JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li> <a href="blog.html">Atendimento</a>

        <ul>
            <!-- Primeiro | No caso o .first() -->
            <li><a href="base.html">Base de Conhecimento</a>
            </li>
            <li><a href="blog.html">Nosso Blog</a>
            </li>
            <li><a href="contato.php">Fale conosco</a>
            </li>
            <li><a href="suporte.html">Suporte</a>
            </li>
        </ul>
        <ul>
            <!-- Segundo | NĂŁo funciona -->
            <li><a href="base.html">Base de Conhecimento</a>
            </li>
            <li><a href="blog.html">Nosso Blog</a>
            </li>
            <li><a href="contato.php">Fale conosco</a>
            </li>
            <li><a href="suporte.html">Suporte</a>
            </li>
        </ul>
    </li>
</ul>

CSS

ul  ul {
    opacity: 0;
    transition: opacity 1s;
}

ul > li:hover ul {
    opacity: 1;
}

ul ul{
    margin-top: 20px;
}