JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
<li><a href="/" target="_top">Dashboard</a></li>
<li><a href="#">Contacts</a>
    <ul>
    <li><a href="#"><strong>Companies</strong></a></li>
    <li><a href="/customer/addcustomer">Add Company</a></li>
    <li><a href="/customer/viewcustomer">View Company</a></li>
    <li><a href="/customer/add_contact">Add Contact</a></li>
    <li><a href="#"><strong>Suppliers</strong></a></li>
    <li><a href="/suppliers/add_supplier">Add Supplier</a></li>
    <li><a href="/suppliers/view_supplier">View Suppliers</a></li>
    <li><a href="#"><strong>Resellers</strong></a></li>
    <li><a href="/reseller/addreseller">Add Reseller</a></li>
    <li><a href="/reseller/viewreseller">View Resellers</a></li>
    <li><a href="#"><strong>Salesman</strong></a></li>
    <li><a href="/salesman/addsalesman">Add Salesman</a></li>
    <li><a href="/salesman/viewsalesman">View Salesman</a></li>
    </ul>
</li>
<li><a href="#">Porting</a>
    <ul>
    <li><a href="/porting/add_port">Add Port</a></li>
    <li><a href="/porting/view_port">View Port</a></li>
    </ul>
</li>
<li><a href="#">Orders</a>
    <ul>
    <li><a href="/orders/new_order">New Order</a></li>
    <li><a href="/orders/view_order">View Order</a></li>
    </ul>
</li>
<!--<li><a href="#">Competitions</a>
    <ul>
    <li><a href="/competitions/add_competition">Add Competition</a></li>
    <li><a href="/competitions/add_entry">Add Entry</a></li>
    <li><a href="/competitions/edit_competition">Edit Competition</a></li>
    <li><a href="/competitions/view_competition">View Competition</a></li>
    </ul>
</li>-->
<li><a href="#">Billing</a>
    <ul>
    <li><a href="/billing/billingproducttypes">Product Types</a></li>
    <li><a href="/billing/viewinvoices?status=p">Ad Hoc Invoices</a></li>
    <li><a href="/billing/show_call_data">Show Call Data</a></li>
    <li><a href="/billing/invoicelist">Invoice List</a></li>
	<li><a href="/billing/sagenominalcodes">Sage Nominal Codes</a></li>
	<li><a...

CSS

#nav>li {
    float:left
}
#nav li:hover ul {
    position:absolute;
     display:block;
}
#nav {
	margin:20px 0 0 0;
	left:0;
	width: 100%; 
	list-style:none;
}
#nav li a {
	display: inline-block; 
	padding: 8px;
	margin:0;
	background: #666666; 
	border-top: 1px solid #EEEEEE; 
	border-bottom: 1px solid #EEEEEE; 
	text-decoration: none; 
	color: #EEEEEE;
	width:80px;
	border-right:1px solid #F36F25;
}
#nav li a:hover, #nav li a.active {
	background: #F36F25; 
	color: #FFFFFF;
	cursor:pointer;
}
#nav li ul {
	display: none;
	list-style:none;
    margin:0;
}
#nav li ul li {
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	margin-left:-40px;
}
#nav li ul li a {
	background: #EEEEEE;
	color:#666666;
	border:1px solid #EEEEEE;
	width:145px;
}
#nav li ul li a:hover {
	background: #EEEEEE;
	color:#f36f25;
	border:1px solid #f36f25;
}