JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropdown"> 
    <li class="headlink"> 
        <a href="javascript://">Menu</a> <img src="/static/images/mini/sort_down.png" /> 
 
        <ul class="arrowlist invisible"> 
            <li>Hello 1</li> 
            <li>Hello 2</li> 
            <li>Hello 3</li> 
        </ul> 
    </li> 
</ul>

CSS

.dropdown {z-index: 1} 
.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;} 
.dropdown li{} 
.dropdown a{outline:none} 
.dropdown ul{z-index:100;border:1px solid #C7C9CF;-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;behavior: url(/static/css3pie.php);background: #FFF url("/static/images/grey_fade_back.png") repeat-x scroll bottom;padding:8px;position:absolute;top:-1px;left:-4px} 
.dropdown ul li{margin:2px;white-space:nowrap}

JavaScript

$('.dropdown li.headlink') 
    .click(function() { 
        $(this).css('position', 'relative'); 
        $('ul', this).slideDown(100); 
    }); 
 
        $('.dropdown li.headlink') 
    .mouseleave(function(){ 
        var headlink = this; 
        $('ul', this).slideUp(100, function(){ 
            $(headlink).css('position', 'static'); 
        }) 
    }); 
$('.dropdown > li').click(function() {
    $('ul', this).slideDown(100);
}).mouseleave(function() {
    $('ul', this).slideUp(100)
});

$('.dropdown > li > ul').last().addClass('last');