JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

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

        <ul>
            <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
                    <ul>
                        <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>
                </a>
            </li>
        </ul>
    </li>
</ul>

CSS

li ul {
    display:none;
}

JavaScript

$("#menu").find('li').hover(function () {
        $(this).children('ul').clearQueue().slideDown(600);
        $(this).children('a').children('ul').clearQueue().fadeIn(600);
    }, function () {
        $(this).children('ul').slideUp(600);
        $(this).children('a').children('ul').fadeOut(600);
    });
    
    $("#menu").find('a').has( "ul" ).each(function() {
        $(this).addClass("menu-arrow");
    });