JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mainNav" class="clearfix"><!-- begin mainNav ul -->
            <li class="mainNavFirst"><a href="#" title="">About Us<span class="mainNav_arrow"></span></a>
                <ul>
                    <li><a href="#">FC Families</a></li>
                    <li><a href="#">Program</a></li>
                    <li class="last"><a href="#">Forms &amp; Registration</a></li>
                </ul>
            </li>
            <li><a href="#" title="">Families<span class="mainNav_arrow"></span></a>
                <ul>
                    <li><a href="#">FC Families</a></li>
                    <li><a href="#">Program</a></li>
                    <li class="last"><a href="#">Forms &amp; Registration</a></li>
                </ul>
                </li>
            <li><a href="#" title="">Volunteers<span class="mainNav_arrow"></span></a>
                <ul>
                    <li><a href="#">FC Families</a></li>
                    <li><a href="#">Program</a></li>
                    <li class="last"><a href="#">Forms &amp; Registration</a></li>
                </ul>
            </li>
            <li><a href="#" title="">Schools<span class="mainNav_arrow"></span></a>
                <ul>
                    <li><a href="#">FC Families</a></li>
                    <li><a href="#">Program</a></li>
                    <li class="last"><a href="#">Forms &amp; Registration</a></li>
                </ul>
            </li>
            <li><a href="#" title="">Supporters<span class="mainNav_arrow"></span></a>
                <ul>
                    <li><a href="#">FC Families</a></li>
                    <li><a href="#">Program</a></li>
                    <li class="last"><a href="#">Forms &amp; Registration</a></li>
                </ul>
            </li>
            <li><a href="#" title="">SKECHERS Friendship Walk<span class="mainNav_arrow"></span></a>
                <ul>
                    <li><a href="#">FC Families</a></li>
                    <li><a...

CSS

ul#mainNav {
    padding: 0;
    margin: 0;
    position: relative;
    width: 980px;
    background: transparent url(images/mainNavbar.png) no-repeat top center;
    margin: 0 auto;
    display: inline;
    float: left;
     z-index: 100;
}
ul#mainNav li {
    list-style: none;
    padding: 0 27px;
    display: inline;
    height: 40px;
    line-height: 40px;
    position: relative;
    float: left;
  /*   outline: 1px solid red; */
}
ul#mainNav ul {
display: block;
font-size: 100%;
cursor: default;
position: absolute;
top: 40px;
left: 27px;
width: 160px;
/* z-index: -100; */
background-color: #c32c19;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#362f2d')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#362f2d');
zoom: 1;
-moz-box-shadow: #000 1px 1px .3em;
-webkit-box-shadow: #000 1px 1px .3em;
box-shadow: #000 1px 1px .3em;
}
ul#mainNav ul li {
/* float: none; */
font-size: 12px;
line-height: normal;
display: block;
margin: 0;
width: 150px;
height: 24px;
padding: 20px 0;
border-bottom: 2px solid #8d0d0f;
padding: 10px 0 0 10px;
cursor: pointer;
}
/***** remove border from last sub list item ******/
ul#mainNav ul li.last {
border: 0;
}
ul#mainNav ul li:hover {
background-color: #8d0d0f;
}
ul#mainNav ul li a:link,ul#mainNav ul li a:visited {
color: #ffffff;
font-size: 12px;
float: left;
}
ul#mainNav li a,ul#mainNav li a:link,ul#mainNav li a:visited {
color: #111110;
font-family: "Helvetica Neue",Arial, Sans-Serif,default;
font-size: 17px;
text-align: left;
letter-spacing: 1px;
}

JavaScript

// menubar
$("ul#mainNav li").children("ul").hide();
$("ul#mainNav li").hover(function(){
$(this).children("ul").stop(true,true).slideDown(100);
},function(){
$(this).children("ul").stop(true,true).slideUp(100);
});