JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="navigation" class="nav-main">
    <li><a href="http://www.psdgraphics.com/">Home</a></li>
    
    <li class="list"><a href="#">Freebies</a>
    <ul class="nav-sub">
    <li><a href="http://www.psdgraphics.com/category/backgrounds/">Backgrounds</a></li>
        <li><a href="http://www.psdgraphics.com/category/buttons/">Buttons</a></li>
        <li><a href="http://www.psdgraphics.com/category/graphics/">Graphics</a></li>
        <li><a href="http://www.psdgraphics.com/category/html-css/">HTML & CSS</a></li>
        <li><a href="http://www.psdgraphics.com/category/icons/">Icons</a></li>
        <li><a href="http://www.psdgraphics.com/category/psd/">PSD</a></li>
        <li><a href="http://www.psdgraphics.com/category/templates/">Templates</a></li>
        <li><a href="http://www.psdgraphics.com/category/tutorials/">Tutorials</a></li>    
    </ul>
    </li>
    
    <li class="list"><a href="#">About</a>
    <ul class="nav-sub">
    <li><a href="http://www.psdgraphics.com/about/">About PSDGraphics</a></li>
         <li><a href="http://www.psdgraphics.com/commercial-use/">Commercial Use</a></li>
        <li><a href="http://www.psdgraphics.com/about/terms-of-use/">Terms Of Use</a></li>
    </ul>
    </li>
    
    <li><a href="http://www.psdgraphics.com/advertise/">Advertise</a></li>
    <li><a href="http://www.psdgraphics.com/contact/">Contact</a></li>
    

</ul>

CSS

ul.nav-main,
ul.nav-main li {
    list-style: none;
    margin: 0;
    padding: 0;
    display:inline-block;
}


ul.nav-main {
    position: relative;
    z-index: 597;
    float:left
}

ul.nav-main li:hover > ul {
    visibility: visible;
}


ul.nav-main li.hover,
ul.nav-main li:hover {
    position: relative;
    z-index: 599;
    cursor: pointer;
    background: url(images/dropdown-bg-hover.gif) repeat-x left top;
}



ul.nav-main li {
    float:left;
    display:block;
    height: 51px;
    color: #999;
    font: 14px Arial, Helvetica, sans-serif;
    background: url(images/separator.gif) no-repeat right center;
}

ul.nav-main li a {
    display:block;
    padding: 16px 16px 0 16px;
    height: 35px;
    color: #999;
    font: 14px Arial, Helvetica, sans-serif;
    text-decoration:none;
}

ul.nav-main li a:hover {
    color:#D6D6D6;
}



ul.nav-main *.list {
    padding-right: 22px;
    background: url(images/navigation-arrow.gif) no-repeat right top;
}



ul.nav-sub {
    visibility: hidden;
    position: absolute;
    padding:10px;
    top: 48px;
    left: 0;
    z-index: 598;
    background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}


ul.nav-sub li {
    list-style:none;
    display:block;
    padding: 0;
    height: 27px;
    float: none;
    width:145px;
    border-bottom: 1px solid #5a5a5a;
    background: none;
}

ul.nav-sub li a {
    list-style:none;
    display:block;
    padding: 6px 5px 6px 5px;
    height: 15px;
    float: none;
    width:145px;
    background: none;
    font: 12px Arial, Helvetica, sans-serif;    
}