JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="container">
    <li class="draggable">
        <div class="header">
            <h1>1</h1>
            <div class="button"></div>
            <div class="button dropmenu"  id="menuwrap">
                <a href="#" class="dropdown"><img src="../images/Forward.JPG"></a>
                     <ul class="menucontainer" style="margin:0px" id="dr1">
                            <li><a href="#">One</a></li>
                            <li><a href="#">Two</a></li>
                            <li><a href="#">Three</a></li>
                    </ul>
            </div>
            <div class="button"></div>
        </div>



    </li>
   <li class="draggable">
        <div class="header">
            <h1>2</h1>
             <div class="button minimize"></div>
            <div class="button dropmenu" id="menuwrap2">
                 <a href="#" class="dropdown"><img src="../images/Forward.JPG"></a>
                      <ul class="menucontainer" style="margin:0px" id="dr2">
                             <li><a href="#">One</a></li>
                             <li><a href="#">Two</a></li>
                             <li><a href="#">Three</a></li>
                     </ul>
             </div>
            <div class="button maximize"></div>
        </div>
    </li>


</ul>

CSS

.draggable
{
    width:100px;
    height:100px;
    margin: 0px;
    float: left;
    background: #111;
    list-style:none;
    border:1px solid #111;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
-moz-box-shadow: 5px 5px 5px #111; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 5px #111;
}

.header h1
{
    font-size: 10pt;
    font-weight: bold;
    font-family: arial;
    color: #eee;
    margin: 5px;
    float: left;
}

.header .button
{
    height: 10px;
    width: 10px;
    margin: 7px 5px 1px 1px;
    background: white;
    float: right;
    display: inline;
}

.body
{
    margin: 5px;
}

.body input
{
    margin: 1px;
    display: block;
}

#container
{
    height: 500px;
    width: 1000px;

}

.menucontainer{
    background-color:#202020;
    height:80px;
    width:60px;
    border:1px solid red;
    position:absolute;
    border:1px solid red;
    border-top:0px;
}

JavaScript

$(function() {
    $('.menucontainer').hide();
    $('#container').sortable({
        handle:'h1',
        scroll: false,
        revert: true,
        tolerance: 'pointer'
    });


    $('.dropmenu').on('click', function(){
        var $ul = $('.menucontainer', this);            
        $ul.show(500);
        console.log( $ul );
        return false;
    });

    $('html').on('click', function() {
        $('.menucontainer').hide(500);
    });

});