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.