JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav" class="clearfix">
    <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...

CSS

#nav>li {
    float:left;
    list-style:none;
}
#nav li:hover ul {
    position:absolute;
    display:block;
}
#nav {
    background-color:#666;
    margin:20px 0 0 0;
    width: 100%;
}
#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 {
    position:absolute;
    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;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}