JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <div class="navbar-collapse collapse text-center" id="navegacion">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="natacion.html">NATACIÓN</a></li>
                <li><a href="Easo/index.html">ESCUELA</a></li>
                <li><a href="fitness.html">FITNESS</a></li>

                <li class="infantil"><a href="infantil.html">INFANTIL</a>
                    <ul class="desplegable">
                        <li>EXTRAESCOLARES</li>
                        <li>ACTIVIDADES</li>
                        <li>VACACIONES</li>
                    </ul>  
                </li>

                <li class="infantil"><a href="cumpleaños.html">CUMPLEAÑOS</a>
                   <ul class="desplegable">
                       <li>Prueba1</li>
                       <li>Prueba2</li>
                   </ul>
                </li>
                
                <li><a href="sala-bienestar.html">BIENESTAR</a></li>
                <li><a href="galeria.html">GALERÍA</a></li>
            </ul>
        </div>

JavaScript

$(document).ready(function() {
                    $(".desplegable").css('display','none');    

                    $(".infantil").mouseover(function() {
                        $(".desplegable").show('slow');
                    });

                    $(".infantil").mouseleave(function() {
                        $(".desplegable").hide('slow');

                    });
                });