Dropdown menu

by pj_js15

HTML

<div class="menuItem">Menu Item</div>
<div id="dropdownOne">
    <ul>
        <li><a href="#">Sub Item 1</a></li>
        <li><a href="#">Sub Item 2</a></li>
    </ul>
</div>

CSS

body{
    font-family: Arial;
    font-size: 11px;
}

.menuItem{
    border: 1px solid gray;
    width: 80px;
    padding-left: 3px;
}
#dropdownOne{
    display:none;
    margin-top: 2px;
    padding: 0;
    width: 200px;
}
#dropdownOne ul {
    background-color: #3AC8E0;
    /*border: 1px solid blue;*/
    list-style: none;
    margin: 0;
    padding-left:0;    
}
#dropdownOne ul li{
    height: 18px;
    padding: 5px 0px 0px 8px;
}
#dropdownOne ul li a{
    color:white;
    text-decoration: none;
}
#dropdownOne ul li:hover{
    background-color: #269DB1;
}

JavaScript

$().ready(function(){
    $('.menuItem').mouseenter(function() {
        $('#dropdownOne').fadeIn();
    });  
    
    $("#dropdownOne").mouseleave(function() {
        $('#dropdownOne').fadeOut();       
    });
    
});