JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<a href="/guitar">Menu 1</a>
<div class="hovereffect">
<a href="/software">Menu 2</a>
<a class="hidden" href="/software/practicaluml">Submenu 1</a>
<a class="hidden" href="/software/trusting_trust">Submenu 2</a>
</div>
<a href="/sketches">Menu 3</a>
<a href="/sketches">Menu 4</a>
</nav>

CSS

.hovereffect:hover > .hidden {
    opacity: 1;
    height: 1.5em;
    padding: 0.5em 1em 0.5em 2em;
    border: thin solid white;
	transition-delay: 0s;
}

.hovereffect .hidden {
    opacity: 0;
    clear: both;
    height: 0em;
    padding: 0em;
    border: none;
	transition-property: opacity height padding border;
	transition-duration: 400ms;
	transition-delay: 1s;
}
nav {
	float: right;
	width: 15em;
	margin: 0.1em 0em 0.1em 1em;
	font-variant: small-caps;
}

nav a {
	display: block;
	background-color: #FBF0D4;
	color: #725D29;
	border: thin solid white;
	padding: 0.5em 1em;
	text-decoration: underline;
}

nav a:hover, nav a:active {
	background-color: #725D29;
	color: #FBF0D4;
}