JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">Home</a>
        <ul>
                <li><a href="#">Jordan</a></li>
                <li><a href="#">Jordan</a></li>
            </ul>
        </li>
        <li><a href="#">News & Events</a>
            <ul>
                <li><a href="#">Jordan</a></li>
                <li><a href="#">Jordan</a></li>
                <li><a href="#">Jordan</a></li>
                <li><a href="#">Jordan</a></li>
            </ul>
        </li>
        <li><a href="#">Discover</a>
            <ul>
                <li><a href="#">Jordan</a></li>
                <li><a href="#">Jordan</a></li>
                <li><a href="#">Jordan</a></li>
                <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);
}