JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <ul>    
        <li><a runat="server" href="http://www.synergisticsinstitute.com/">Welcome</a></li>
        <li>
            <a runat="server" href="http://www.synergisticsinstitute.com/bhot-for-men/">BHOT&trade; For Men</a>
            <div runat="server" class="subnav" style="display:none;">
                <a href="http://www.synergisticsinstitute.com/bhot-for-men/research/">BHOT&trade; Research</a>
                <a href="http://www.synergisticsinstitute.com/bhot-for-men/faq/">FAQ for Men</a>
            </div>
        </li>
        <li>
            <a runat="server" class="bhot-for-women" href="http://www.synergisticsinstitute.com/bhot-for-women/">BHOT&trade; For Women</a>
            <div runat="server" class="subnav" style="display:none;">
                <a href="http://www.synergisticsinstitute.com/bhot-for-women/faq/">FAQ for Women</a>
            </div>
        </li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/hcg-weight-loss/">hCG Weight Loss</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/nutrition/">Nutrition</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/supplements/">Supplements</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/medical-director/">Meet Our Medical Director</a></li>
        <li><a runat="server" href="http://www.synergisticsinstitute.com/contact-us/">Contact Us</a></li>
    </ul>
</div>

CSS

.nav {
    margin-top: 0 !important;
    position: relative;
    width: 200px;
}
.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav ul { list-style: none; }
.nav a {
    display: block;
    margin: 0 0 3px;
}
.nav a {
    background: none repeat scroll 0 0 #5386BA;
    color: #FFFFFF;
    padding: 3px 7px;
    text-decoration: none;
}
.nav div.subnav {
    left: 203px;
    margin: -30px 0 0;
    position: absolute;
    width: 200px;
}

JavaScript

$('.nav div.subnav').each(function () {
    var $subnav = $(this);
    var timeoutHandle;
    $subnav.parent().hover(function () {
        clearTimeout(timeoutHandle);
        navMouseIn($subnav)
    }, function () {
        timeoutHandle = setTimeout(navMouseOut($subnav), 300);
    });
});

function navMouseIn($elem) {
    $elem.show('drop'); 
}
function navMouseOut($elem) {
    $elem.hide('drop'); 
}