JSFiddle - React, Tailwind, and code Playground

by Brandon

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>
            <ul class="sub">
            <li><a href="#edit">Edit</a></li>
            <li><a href="#view">View</a></li>
            </ul>
        </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;
    position: relative;
}

.file_menu li {
    background-color: #302f2f;
    position: relative;
}

.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;
}

.sub {
    position: absolute;
    width:300px;
    border: 1px solid #1c1c1c;
    display: none;
    left: 302px;
    top: 0px;
}

JavaScript

$(document).ready(function () {
    $(".hoverli").hover(
  function () {
     $('ul.file_menu').slideDown('medium');
  }, 
  function () {
     $('ul.file_menu').slideUp('medium');
  }
);

     $(".file_menu li").hover(
  function () {
     $(this).children("ul").slideDown('medium');
  },
  function () {
    $(this).children("ul").slideUp('medium');
  }
);
});