I have a menu strip . I planned to :
slideDown()
display: none
slideUp
<div id="main_menu" onmouseover="$('#submenu').stop(true,false).slideDown();" onmouseout="$('#submenu').stop(true,false).slideUp();">Main Menu</div>
<div id="submenu" style="display: none">Some submenu contents here</div>
slideUp()
An easy way you can do is adding a parent dom, and binding the mouse event to it.
html
<div id="menu">
<div id="main_menu">Main Menu</div>
<div id="submenu" style="display: none">Some submenu contents here</div>
</div>
js
$('#menu').hover(function () {
$('#submenu').stop(true, false).slideDown();
},
function () {
$('#submenu').stop(true, false).slideUp();
});
here is jsfiddle demo. http://jsfiddle.net/vyDVd/
update
If you don't want to adding a parent dom, you can try putting submenu
into main_menu
as a child menu.
I update your jsfiddle demo here http://jsfiddle.net/9KfYr/2/
I add 2 css attributes to #submenu
to keep UI unchange.
position:absolute;
top:30px;
And here, I suggest use .hover() provided by jQuery.