Invisible DIV animation

by Ryan Brewer

HTML

<body>
    <div id="contain">
    <div class="menu">Hi</div>
    </div>
</body>

CSS

body {
    background-color: #CCFFFF;
}
#contain {
    margin: auto;
    text-align: center;
    width: 70px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
}
.menu {
    background-color: #666666;
    position: relative;
    top: 0;
    margin: auto;
    text-align: center;
    width: 70px;
    height: 30px;
    font-color: white;
    border-radius: 5px;
    display: none;
    
}

JavaScript

$(document).ready(function(){
    $('#contain').on({
        mouseenter: function(){
            $('.menu').slideDown('slow');},
        mouseleave: function() {
           $('.menu').slideUp('slow');        
        }
    });
});