Have you tried an approach without using js or jQuery?
I mean, you can do it just using HTML5 with CSS3 transitions.
It will look like this:
HTML:
<div id="menu">
<ul>
<a href="#"><li>Menu 1</li></a>
<a href="#"><li>Menu 2</li></a>
<a href="#"><li>Menu 3</li></a>
<a href="#"><li>Menu 4</li></a>
<a href="#"><li>Menu 5</li></a>
<a href="#"><li>Menu 6</li></a>
</ul>
CSS
a {
font-family: verdana;
color: #fff;
font-size: 11px;
}
a:hover {
color: #cff;
}
#menu {
background: #666;
height: 30px;
width: 377px;
transition:height 0.5s;
-webkit-transition:height 0.5s;
}
#menu:hover {
height: 200px;
}
ul {
padding: 0; margin: 0;
padding-right: 10px;
position: absolute;
}
ul li {
float: left;
display:block;
padding: 10px;
margin: 0;
background: #333;
border-right: 1px solid #666
}
#outset {
width: 377px; height: 200px;
background: #900;
}
check out this JsFiddle example
EDIT
To fit your question, I made some change in the code above and add a little jQuery. Like this:
$(document).ready(function() {
$("#subMenu").hide();
});
$("#menu").hover(
function() {
$("#subMenu").show('fast');
},
function() {
$("#subMenu").hide('fast');
}
);
You can see the results in this JsFiddle example