JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="button"><span id="text">Down</span></div>
<div id="umdown">
   <div id="multi">Multiple</div>
   <div id="sd">Single</div>
</div>

CSS

#button{
    position:relative; top:1px; background-color:#060; width:200px; height:30px; background-image:url(../images/btn_bg.jpg); cursor:pointer;
}

#text{ position:absolute; margin-top:5px; text-align:center; width:200px; height:30px; font-stretch:expanded; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-weight:bold; font-size:17px;}

#multi{
    width:160px; margin-left:5px;
}

#sd{
        width:160px; margin-left:5px;
}

#umdown{
    display: none;
    position:relative; left:30px; height:50px; background-color:#900; width:170px; cursor:pointer; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-size:14px;
}

JavaScript

$('#button').bind('mouseover',function(){
    $('#umdown').stop(true, true).fadeIn();
});
$('#umdown').bind('mouseleave',function(){                                                                $(this).stop(true, true).fadeOut();
});