JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nhcu.idesignid.com/Styles.css">
<div id="headermenu">
    <ul class="level0">
        <li><a class="nav" href="/">Home</a></li>
        <li><img src="/images/menudivider.gif" width="2" height="32"></li>
        <li><a class="nav">Products &amp; Services</a>
            <ul class="level1">
                <li><a class="subnav" href="/">Savings Accounts</a>
                    <ul class="level2">
                        <li><a class="subsubnav" href="/">Sunrise Savers Club</a></li>
                        <li><a class="subsubnav" href="/">New Wave Savers Club</a></li>
                        <li><a class="subsubnav" href="/">Horizons Club</a></li>
                    </ul>
                </li>    
                <li><a class="subnav" href="/">Checking Accounts</a></li>
                <li><a class="subnav" href="/">Investments</a></li>
            </ul>
        </li>
        <li><img src="/images/menudivider.gif" width="2" height="32"></li>
    </ul>
</div>

JavaScript

$(document).ready(function() {
    $("ul.level0 > li > a ").hover(function() {
        var $a = $(this);
        $a.addClass('hover');
        $a.next('ul.level1').slideDown("normal").show();
        $a.parent().hover(function() {
            var target = $('ul.level2',this); 
            $(this).hover(function () { 
                target.show(); 
            },function () { 
                target.hide(); 
            });
        }, function() {
            $(this).find('ul.level1').slideUp('fast');
            $('a', this).removeClass('hover');
        });
    }, function(e) {
        if (e.relatedTarget.tagName.toLowerCase() == 'html') {
            $(this).removeClass('hover');
        }
    });
    
    $("ul.level1:has(ul)").find("a:first").append(" &raquo; ");
    
});