JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="topmenu">
	
    <ul id="menutitle">Menu Title</ul>
    	<ul id="submenu">
    		<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
    		<li><a href="#">Link 3</a></li>
    		<li><a href="#">Link 4</a></li>
		</ul>
</nav>

CSS

#topmenu {background: #000; width: 150px; height: 50px; color: #fff; }

#submenu {display: block;
position: absolute;
width: 110px;
background: #333;
list-style: none;
line-height: 2em;
overflow: hidden;
    max-height:0;
    transition: max-height 0.7s ease-in; 
}

#topmenu:hover #submenu {
max-height: 200px;}

#menutitle {color: #ff0000;}
a {color: #FF0}