JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<nav>
    	<ul>
        	<li>Home</li>
            <li>News & Events</li>
            <li>
            	Discover
                <ul>
                    <li>Jordan</li>
                    <li>Jordan</li>

                </ul>
    		</li>
        </ul>
    </nav>

CSS

ul
{
    margin: 0;
    padding: 0;
}

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;
    z-index:-1;
}

ul > li a
{
    display: block;
    position: relative;
}
ul > li ul
{
    max-height: 0;
    overflow: hidden;
    position: absolute;
    left:0;
    width: 300px;
    background-color: gray;
    transition-duration: 0.4s;
    transition-property: max-height;
}

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

ul > li:hover ul
{
    max-height: 400px;
}