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;
display: none;
background: #333;
list-style: none;
line-height: 2em; }

#menutitle:hover + #submenu {display: block; -webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in  2s none;
-o-transition: ease-in  2s none;
transition: ease-in  2s none;  }

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