JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<nav>
    <li>
        Primero
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>
        Segundo
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>
        Tercero
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>
        Cuarto
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>
        Quinto
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
</nav>

<nav>
    <li>
        Primero
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>
        Segundo
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>
        Tercero
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>
        Cuarto
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>
        Quinto
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
</nav>

CSS

*{
    transition: background .5s, color .5s;
}

nav{
    display: block;
    width: 100%;
    height: 5rem;
    background: steelblue;
    margin-bottom: 5rem;
}

nav li{
    list-style: none;
    display: inline-block;
    cursor: pointer;
    color: white;
    height: inherit;
    width: 5rem;
    line-height: 5rem;
    text-align: center;
}

nav li:hover{
    background: lightsteelblue;
    color: navy;
}

nav li ul{
    display: none;
    position: absolute;
    margin-top: 0;
    height: auto;
}

nav li ul li{
    display: block;
    margin-left: -2.5rem;
    background: lightsteelblue;
}

nav li ul li:hover{
    background: lightblue;
    color: whitesmoke;
}

JavaScript

$("nav li").stop(true, false).hover(function(){
    $(this).find("ul").stop(true, false).slideDown("slow").css("z-index", 1000);
}, function(){
    $(this).find("ul").stop(true, false).slideUp("slow").css("z-index", 1);
});