JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<ul>
    <li><a href="#">Link</a>
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
    </ul>
    </li>

    <li><a href="#">Test</a>
    <ul>
        <li><a href="#">Thing</a></li>
        <li><a href="#">Sausage</a></li>
        <li><a href="#">Rob a bank</a></li>
    </ul>        
    </li>

    <li><a href="#">Lorem</a></li>
    <li><a href="#">Add note</a></li>
    <li><a href="#">Annotate</a></li>
</ul>
</nav>

CSS

nav { 
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}

nav ul {
list-style: none;
}

nav ul li {
    display: inline-block;
	text-align: left;
}

nav a {
    display:block;
	padding:0 20px;
    transition: color .2s;
	color: black;
	font-size: 16px;
	font-weight: 600;
	line-height: 40px;
	text-decoration: none;
}

nav ul ul li a { color: #FFFF64; }
nav ul ul li a:hover { color: #99A7EE; }
nav a:hover { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:hover > ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:hover { background: #333; }