JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

nav ul ul
            {
                max-height: 0;
                overflow: hidden;
                -webkit-transition: max-height 0.8s;
                -moz-transition: max-height 0.8s;
                transition: max-height 0.8s;
            }
            nav ul :hover ul
            {
                max-height: 200px;
overflow:visible;
    -webkit-transition: max-height 0.8s;
                -moz-transition: max-height 0.8s;
                transition: max-height 0.8s;
            }