How do I slide down a div which is already visible when d mouse hovers on the div above it...

eg.


My menu structure is as follows.. When i hover on the main menu element, the submenu displays. I want the below div (id=page) to move if there are any children for the menu items in the main menu. How can I do it in jquery?

Code:
<div id="header-menu">
<ul>
<li><a href="javascript:void(0);">Home</a></li>
<li>
<a href="javascript:void(0);">About</a>
<ul>
<li>
<a href="javascript:void(0);">aaaaa</a>
<ul>
<li><a href="javascript:void(0);">aaaaa</a></li>
<li><a href="javascript:void(0);">aaaaa</a></li>
<li><a href="javascript:void(0);">aaaaa</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">aaaaa</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="page">
cdssds
</div>