JSFiddle - React, Tailwind, and code Playground

by Roy Howie

HTML

<div id="button">
    <ul class="hover">
       <li class="hoverli">Hover over me!
            <ul class="file_menu">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>                
            </ul>
        </li>
    </ul>
</div>

CSS

#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

$("ul .hover").hover(function(){
    $(this).find("ul").show();
}, function(){
    $(this).find("ul").delay(200).hide();
});