JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<ul>
		<li><a href="#">BUTTON IMAGE</a>
			<ul>
				<li><a href="#">Accreditation Client Login</a></li>
				<li><a href="#">Training Client Login</a></li>
				<li><a href="#">Training Registration</a></li>
                <li><a href="#">Guardian Tracking</a></li>
			</ul>
		</li>
	</ul>
</nav>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {margin: 0; padding: 0; border: 0;}
body {background: #909eab url(bg.png); font-family: Helvetica, sans-serif; font-size: 12px;}

/* Target main menu header */
nav {margin: 100px auto; text-align: center;}

/* Target header image button */
nav ul {list-style: none; position: relative; display: inline-table;}
nav ul li {float: right; width: 172px; height: 35px; background-color: red;}
nav ul li:hover > ul {display: block; text-align: left; background-color: black;}			

/* Target Sub Menu */
nav ul ul {display: none; background: #5f6975; border-radius: 0px; padding: 0;position: absolute; top: 100%;}
nav ul ul li {float: none;  border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;  background: blue; }
nav ul ul li:hover  {background: #000; color: red;}
nav ul ul li a {color: #fff; text-decoration:none; display: block; width: 140px;padding: 8px 25px;}