javascript side menu uncluttering

[othellmog]

I've been fixing a website of one of my friends and I need some help.he has a side bar that has some submenus that are ordered like this:\[code\]<ul id="nav"><div id="nav-scroll"> <li id="hasnav1"><a href="http://stackoverflow.com/questions/15669323/#">item 1</a> <ul id="nav1"> <li><a href="http://stackoverflow.com/questions/15669323/#">item 1-1</a></li> <li><a href="http://stackoverflow.com/questions/15669323/#">item 1-2</a></li> </ul></li> <li><a href="http://stackoverflow.com/questions/15669323/#">item 2</a></li> <li id="hasnav2"><a href="http://stackoverflow.com/questions/15669323/#">item 3</a> <ul id="nav2"> <li><a href="http://stackoverflow.com/questions/15669323/#">item 3-1</a></li> </ul</li> </div></ul>\[/code\]in total there are currently 3 different hasnav id-tags and the javascript in the index is the following:\[code\]<script>$(document).ready(function(){$("#hasnav1").hover(function(){$("#nav1").stop();$("#nav1").show();$("#nav1").animate({opacity:1, left:250},500);},function(){$("#nav1").stop();$("#nav1").animate({left:"0px", opacity:0},400) }); });</script><script>$(document).ready(function(){$("#hasnav2").hover(function(){$("#nav2").stop();$("#nav2").show();$("#nav2").animate({opacity:1, left:250},500);},function(){$("#nav2").stop();$("#nav2").animate({left:"0px", opacity:0},400)}); });</script><script>$(document).ready(function(){$("#hasnav3").hover(function(){$("#nav3").stop();$("#nav3").show();$("#nav3").animate({opacity:1, left:250},500);},function(){$("#nav3").stop();$("#nav3").animate({left:"0px", opacity:0},400)}); }); </script>\[/code\]I have to find a way to merge this code into one simple script instead of in 3 different because I have to add 4 more submenus in there...thanks in advance.