JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="container">    
    <h1>Horizontal Subnav w/ CSS &amp; jQuery</h1> 
    <div style="clear: both; display: block; padding-bottom: 20px;"><a href="http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/" style="color: #1376c9;">Horizontal Sub-nav with CSS &amp; jQuery</a> by Soh Tanaka. Check out his <a href="http://www.sohtanaka.com/web-design-blog/" style="color: #1376c9;">Web Design Blog</a> for more tutorials! - Nav inspired by the <a href="http://www.behance.net/" target="_blank">Behance Network</a></div> 
    <ul id="topnav"> 
        <li><a href="#">Home</a></li> 
        <li class="default"> 
            <a href="#">About</a> 
            <span> 
                <a href="#">The Company</a> |
                <a href="#">The Team</a> |
                <a href="#">Careers</a> 
            </span> 
        </li> 
        <li> 
            <a href="#">Services</a> 
            <span> 
                <a href="#">What We Do</a> |
                <a href="#">Our Process</a> |
                <a href="#">Testimonials</a> 
            </span> 
        </li> 
        <li> 
            <a href="#">Portfolio</a> 
            <span> 
                <a href="#">Web Design</a> |
                <a href="#">Development</a> |
                <a href="#">Identity</a> |
                <a href="#">SEO &amp; Internet Marketing</a> |
                <a href="#">Print Design</a> 
            </span> 
        </li> 
        <li><a href="#">Contact</a></li> 
    </ul> 
    
 
</div>

CSS

body {
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
h1 {
    font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    color: #333;
    margin: 0;
    padding: 5px 0;
}
h1 small{
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
    color: #fff;
}
.container {width: 970px; margin: 0 auto;}
 
 
 
ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 970px;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background: url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_stretch.gif) repeat-x;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_active.gif) repeat-x; }
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 970px;
    background: #1376c9;
    color: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

JavaScript

$("ul#topnav li").unbind().hover(function() {
      $(this).css({ 'background' : '#1376c9 url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_active.gif) repeat-x'})
             .find("span").show();
      $(this).siblings('li').css({ 'background' : 'none'}).find("span").hide();
    } , function() {
      if($(this).hasClass('default')) return;
      $(this).css({ 'background' : 'none'})
             .find("span").hide();
      $(this).siblings('.default').mouseenter();
    });