JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<div id="navbar">
    <ul id="main-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Members</a>
            <ul>
                <li><a href="#">Sub item 1</a></li>
                <li><a href="#">Sub item 2</a></li>
            </ul>
        </li>
        <li><a href="#">Events</a>
            <ul>
                <li><a href="#">Sub item 3</a></li>
                <li><a href="#">Sub item 4</a></li>
            </ul>
        </li>
        <li><a href="#">Publications</a>
            <ul>
                <li><a href="#">Sub item 5</a></li>
                <li><a href="#">Sub item 6</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

CSS

#navbar { 
    width:550px; 
    height:30px; 
    position:relative; 
    float:right; 
    right:-7px; 
    top:30px; 
}

#main-menu {
    width:100%;
    float:right;
    list-style:none;
}

#main-menu li {
    float:left;
}

#main-menu li a { 
    display:block;
    text-decoration:none; 
    color:#000; 
    background-color:#FC0;
    padding:8px;
    margin-right:10px;
    -webkit-transition: background-color 200ms;
    -moz-transition: background-color 200ms;
    -o-transition: background-color 200ms;
    transition: background-color 200ms;
}

#main-menu li a:hover {
    background-color: #C60;
}

#main-menu li ul {
    position: absolute;
    display:block;
    z-index:999;
}

#main-menu li:hover ul {
    display:block; 
    position:absolute; 

}

#main-menu li:hover ul li {
    visibility: visible;
    opacity: 1;
   
}

#main-menu li li {
    visibility: hidden;
   
    float:none;
    opacity: 0;
    -webkit-transition: opacity .4ms transform .6s, max-height .6s;
    -moz-transition: opacity 200ms transform .6s, max-height .6s;
    -o-transition: opacity 200ms transform .6s, max-height .6s;
    transition: opacity .4s transform .6s, max-height .6s;
}

JavaScript

$(function() {
    $('#main-menu li ul li').each(function() {
        var delay = $(this).index() * 200 + 'ms';
        
        $(this).css({
            '-webkit-transition-delay': delay,
            '-moz-transition-delay': delay,
            '-o-transition-delay': delay,
            'transition-delay': delay
        });                  
    });
});