JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://go.uth.edu/js/modernizr-2.5.3.min.js"></script>
<body>
    <header>
        <h1 id="logo"><a href="/cas/" class="ir">Post Award Grant Management</a></h1>
        <nav>
            <ul>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Preferences</a></li>
                <li><a href="#">Admin</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </nav>
        <section>Post Award Grant Management</section>
    </header>
    <menu id="primaryMenu">
        <ul>
            <li class="active"><a href="#"><span>FMS</span></a><div class="arrow"><div></div></div>
                <ul>
                    <li><a href="#">Project Accounts</a></li>
                    <li><a href="#">Non-Project Accounts</a></li>
                    <li><a href="#">DocID Log</a></li>
                    <li><a href="#">Gift Card Tracking</a></li>
                    <li><a href="#">PO/Account Reference</a></li>
                    <li><a href="#">Speedkey Reference</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Personel</span></a><div class="arrow"><div></div></div>
                <ul>
                    <li><a href="#">Payroll</a>
                        <ul>
                            <li><a href="#">Report</a></li>
                            <li><a href="#">Analysis</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Manage</a></li>
                    <li><a href="#">PI/Project Effort</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Facilities</span></a><div class="arrow"><div></div></div>
                <ul>
                    <li><a href="#">Manage</a></li>
                </ul>
            </li>
        </ul>
        <a href="#" id="primaryMenuCollapse"><span>Collapse Menu</span></a>
    </menu>
    <div id="main">
    </div>
</body>

CSS

#primaryMenu{background:#ececec;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk3JSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNWQ1ZDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(left,  #ececec 0%, #ececec 97%, #d5d5d5 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ececec), color-stop(97%,#ececec), color-stop(100%,#d5d5d5));background: -webkit-linear-gradient(left,  #ececec 0%,#ececec 97%,#d5d5d5 100%);background: -o-linear-gradient(left,  #ececec 0%,#ececec 97%,#d5d5d5 100%);background: -ms-linear-gradient(left,  #ececec 0%,#ececec 97%,#d5d5d5 100%);background: linear-gradient(left,  #ececec 0%,#ececec 97%,#d5d5d5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#d5d5d5',GradientType=1)}

#primaryMenu>ul>li.hovered>a,#primaryMenu>ul>li.hovered>a+.arrow>div{background: #c6c6c6;background:...

JavaScript

$(document).ready(function(){
    // Primary Menu hover/reveal functionality
    $('#primaryMenu>ul>li').hover(function(){
        if($(this).hasClass('active')){}else
        {
            $(this).addClass('hovered')
        }
    },
    function(){
        $(this).removeClass('hovered')
    });
});