JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a>
<ul>
    <li><a href="#">Our Location</a></li>
</ul>
</li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Snippets</a>
<ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Our Company</a></li>
    <li><a href="#">Our Staff</a>
    <ul>
        <li><a href="#">Employment</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://localhost/?page_id=73">Themes</a></li>
</ul>
</div>

CSS

#nav {
    background-color: #9f0000;
    border-top: 1px solid #524D4F;
    border-bottom: 1px solid #524D4F;
    height: 25px;
    width: 100%;
    font-family: Georgia, Verdana, Tahoma, Serif;
}
#nav ul:first-child li:first-child { border-left: 1px solid #524D4F; }
#nav ul { margin: 0; padding: 0; }
#nav li {
    list-style: none;
    float: left;
    position: relative;
}
#nav li a {
    line-height: 21px;
    padding: 2px 8px 3px;
    display: block;
    font-size: 16px;
    color: #f0f0f0;
    border-right: 1px solid #524D4F;
    outline: none;
    background-color: transparent;
    text-decoration: none;
}
#nav ul li a:first-child:active {
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.6);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.6);
}
#nav ul ul {
    display:none;
    position:absolute;
    top:25px;
    left:0;
    float:left;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    width: 180px;
    z-index: 99999;
}
#nav ul ul li {
    min-width: 180px;    
}
#nav ul ul ul {
    left:100%;
    top:0;
}
#nav ul ul a {
    background:#524D4F;
    height:auto;
    line-height:1em;
    padding:5px 0 7px 7px;
}

JavaScript

$('#nav ul li').hover(function() {
   $(this).children('ul').toggle();
});