JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainnav">
    <li class="aboutus"><a href="#" title="About Us">About Us</a>
        <ul>
            <div>
                <li ><a href="#">What is the CU?</a></li>
                <li><a href="#">What are the benefits?</a></li>
                <li><a href="#">Reward system explained</a></li>
            </div>
        </ul>
    </li>
</ul>

CSS

ul { list-style-type: none; margin:0px; padding:0px; width:190px;    }
ul li {background: transparent; position:relative; margin:0px 3px 0px 3px; border: 1px solid #CCC;}
li ul li:firstchild {border:none;}
ul li a{    display:block; overflow:hidden; color: #666; padding-right: 5px; padding-left: 5px; font-weight:bold;}
ul li:hover ul {display:block;}
ul ul li { cursor:pointer;float:none; border:none;}

ul li ul {z-index:1; display:none; position:absolute; text-align: right; margin: 0px ;padding: 0px; right:-1px; }

JavaScript

// NAVIGATION
$(".mainnav li").ready(function() {
    $("ul", this).slideDown("fast");
}, function() {
    $("ul", this).slideUp("fast");
});