JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<nav>
    <ul>
        <li>
            <a href="">Nosotros</a>
            <ul>
                <li><a href="">Misión</a></li>
                <li><a href="">Visón</a></li>
                <li><a href="">Historia</a></li>
            </ul>
        </li>
        <li>
            <a href="">portfolio</a>
            <ul>
                <li><a href="">front-end</a></li>
                <li><a href="">back-end</a></li>
            </ul>
        </li>
        <li>
            <a href="">contactatenos</a>
            <ul>
                <li><a href="">hola</a></li>
                <li><a href="">hola</a></li>
                <li><a href="">hola</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

body {
    font-family: Helvetica, Arial;
    font-size: 11px;
    background: #f1f1f1;
}
a {
    color: #00abbf;
    text-decoration: none;
}
nav > ul {
    text-align: center;
    list-style:none;
    padding:0;
    box-shadow: 0 0 5px #00abbf;
    transition: box-shadow .3s linear 0s;
}
nav > ul:hover {
    box-shadow: 0 0 5px #4679BD;
}
nav > ul > li {
    display: inline-block;
    position: relative;
    margin: 0 0 0 -4px;
    list-style:none;
    padding:0;
}
nav > ul > li:hover > a {
    color: #4679BD;
}
nav > ul > li > a {
    display: block;
    text-transform: uppercase;
    padding: 10px 15px;
    font-size: 1.45em;
    transition: color .3s linear 0s;
}
nav > ul > li > ul {
    display: none;
    position: absolute;
    top: 39px;
    left: 0;
    width: 100%;
    padding:0;
    list-style:none;
}
nav > ul > li > ul > li > a {
    display: block;
    padding: 5px 0;
    font-size: 1.27em;
    color: #f1f1f1;
    background: #00abbf;
    transition: all .3s linear 0s;
}
nav > ul > li > ul > li > a:hover {
    background: #4679BD;
    color: white;
}
nav > ul > li > ul > li:last-child > a {
    border-radius: 0 0 5px 5px;
}

JavaScript

(function(){
    var li = $('nav').children('ul').children('li');
    
    li.hover(function(){
        $(this).children('ul').stop().fadeIn();
    }, function(){
        $(this).children('ul').stop().fadeOut();
    });
})();