[jQuery] Overflow difficulties

I have this website:

http://www.vampsworld.com/freelance_projects/aawc/

with this JQuery:

<script type="text/javascript">
$(document).ready(function() {

$('#homemenuoption')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px
94px)",height:"231px"},{duration:200});
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px
35px)",height:"34px"}, {duration:600, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})

});
</script>

and this html

<div id="toplinks" class="smallgraytext">
<a href="#">Home</a> | <a href="#">Sitemap</a> | <a
href="#">Contact Us</a>
</div>
</div>
<div id="menu">
<ul id="topmenu">
<li id="homemenuoption" style="overflow:hidden;height:
34px;">
<a href="#">Home</a>
<div id="homesubmenu" style="position:relative;z-index:
100;background-color:#089CAA">
<div class="smallgraytext">
<a href="#">Submenu 1</a>
<a href="#">Submenu 2</a>
<a href="#">Submenu 3</a>
<a href="#">Submenu 4</a>
<a href="#">Submenu 5</a>
<a href="#">Submenu 6</a>
</div>
</div>
</li>

For some reason the homesubmenu doesn't show when the box is
homemenuoption is stretched, and should no longer be hidden as
overflow.

Any help would be appreciated.