JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
		<ul>
		<li><a href="/add_contact.php">Add Contact</a></li>
		<li><a href="/view_contact.php">View Contact</a></li>
		<li><a href="/tickets.php">Tickets</a>
			<ul>
				<li><a>TEST</a></li>
			</ul>
		</li>
		<li><a href="/invoices.php">Invoices</a></li>
		<li><a href="/itemised_calls.php">Itemised Calls</a></li>
		</ul>
<div class="clear"></div>
	</nav>

CSS

nav {
    width : 100%;
	text-align: center;
	border:1px solid black;
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

nav ul {
	list-style: none;
    width : 560px;
    margin: 0 auto;
}

nav ul li {
	float: left;
}

nav ul li:hover a {
	color: #000000;
}

nav ul li a {
	display: block; 
    padding: 10px 15px;
	color: #000000;
    text-decoration: none;
}		
		
nav ul ul {
    border-radius: 0px;
    padding: 0;
	position: absolute;
}

nav ul ul li {
	float: none; 
	border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    position: relative;
}

nav ul ul li a {
	color: #000000;
}

nav ul ul li a:hover {
	color: #666666;
}
		
nav ul ul ul {
	position: absolute;
    top:0;
}
.clear{
    clear:both;
}