JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button">
    <ul class="hover">
        <li class="hoverli">
            <img src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776981.png" width="184" height="32" class="menu_class" />
            <ul class="file_menu">
                <li><a href="#file">File</a>
                </li>
                <li><a href="#edit">Edit</a>
                </li>
                <li><a href="#view">View</a>
                </li>
                <li><a href="#insert">Insert</a>
                </li>
                <li><a href="#modify">Modify</a>
                </li>
                <li><a href="#control">Control</a>
                </li>
                <li><a href="#debug">Debug</a>
                </li>
                <li><a href="#window">Window</a>
                </li>
                <li><a href="#help">Help</a>
                </li>
            </ul>
            <li>
    </ul>
</div>

CSS

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color: #333333;
}
#container {
    margin: auto;
    width: 490px;
}
#header {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    height: 42px;
    width: 490px;
    margin-bottom: 20px;
}
#button {
    height: 32px;
    width: 184px;
    margin: auto;
}
ul, li {
    margin:0;
    padding:0;
    list-style:none;
}
.menu_class {
    border:1px solid #1c1c1c;
}
.file_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
}
.file_menu li {
    background-color: #302f2f;
}
.file_menu li a {
    color:#FFFFFF;
    text-decoration:none;
    padding:10px;
    display:block;
}
.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

JavaScript

$(document).ready(function () {
    $(".hoverli").hover(function () {
     $(this).find('ul').slideToggle('medium');
    });
});