JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">News & Events</a>
        </li>
        <li><a href="#">Discover</a>
            <ul>
                <li><a href="#">Jordan</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS

ul
{
    margin: 0;
    padding: 0;
}

nav > ul
{
    background-color: green;
    position: relative;
}

ul > li 
{
    display: inline-block;
    position: relative;
}

ul > li li
{
    display: block;
}

ul > li:before
{
    background-color:gray;
    top: 100%;
    bottom:0;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}

ul > li a
{
    display: block;
    position: relative;
}
ul > li ul
{
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -webkit-transition-duration: 0.4s;
    -webkit-transform-origin: top;
    transform-origin: top;
    transition-duration: 0.4s;
    transition: transform 0.4s;
    overflow: hidden;
    position: absolute;
    left:0;
    width: 300px;
    background-color: gray;
}

ul > li:hover:before
{
    top:0;
}

ul > li:hover ul
{
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
}