Menú drop down (jQuery)

El menú drop down se puede hacer sin JavaScript, solo con la ayuda de CSS. Con :hover. Pero el menú de JavaScript tiene sus ventajas. La más importante es el retraso en la desaparición de los elementos desplegables.

Consideremos un menú simple con un nivel de anidamiento. Escribiremos el código utilizando jQuery. Aunque jQuery no es la herramienta más moderna, esta biblioteca sigue utilizándose en muchos proyectos.

HTML

<ul class="nav">
    <li>
        <a href="#">Item 1</a>
        <ul>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 2</a>
        <ul>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 3</a>
        <ul>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
</ul>

JavaScript

(() => {
    const itemMenu = $('.nav > li');
    let close, flag;

    itemMenu.on('mouseenter', function() {
        if (flag === this) {
            clearTimeout(close);
        }
        $(this).find('ul').stop().fadeIn();
    });

    itemMenu.on('mouseleave', function() {

        close = setTimeout(() => {
            $(this).find('ul').stop().fadeOut();
        }, 300); //set delay 300 ms

        flag = this;
    });
})();

Los elementos del menú anidados deben ocultarse mediante CSS

CSS

.nav li ul {
    display: none;
}

Puedes escribir otros estilos necesarios según tu diseño. Puedes ver un ejemplo de cómo se vería y funcionaría el menú en Codepen: https://codepen.io/igorrybalko/pen/XJrparJ