JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
            <li><a href="index.php"><span>HOME</span></a></li><li>
            <a href="index.php?p=atelier"><span>ATELIER</span></a>
                <ul id="atelier">
                    <li><a href="index.php?p=quem_somos"><span>QUEM SOMOS</span></a></li>
                </ul>
            </li><li>
            <a href="index.php?p=portfolio"><span>PORTFOLIO</span></a></li>
        </ul>

CSS

.menu li{
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
}
.menu li a{
    text-decoration: none;
    color: #9B9A98;
    font-weight: 700;
    font-size: 13px;
}
.menu li a span{
    line-height: 100px;
    display: block;
    padding: 0 15px;
}
.menu li ul{
    margin: 0;
    padding: 0;
    background: rgba(3,3,3,0.85);
    display: none;
    position: absolute;
}
.menu li ul li{
    margin: 0;
    padding: 10px 15px;
    list-style: none;
}

JavaScript

$(document).ready(function(){
   $(".menu li").hover(
       function() {
           $(this).children("#atelier").slideDown();
       },
       function(){
           $(this).children("#atelier").slideUp();
       }
   );
});