animation menu

animation menu

Ok i have this problem i made the menu button- id="m1" and when i hover over then a submenu with buttons( submenu image id = "pag" and submenu button id="buttons")  to come from the left and increase its size : as how my i want my menu to look you can see here : http://www.utah.travel/
here my code:

$(document).ready(function () {
  $("#m1").hover(function(){
    $("#pag").stop().animate(
      {width:"450px"},
      {duration:500})
      $('#buttons').show("normal");
    },function(){
    $("#pag").stop().animate(
      {width:"0px"},
      {duration:500})
$('#buttons').hide("normal");     })
        

        $('#pag').hover(
            function() {
               
    $("#pag").stop().animate(
      {width:"450px"},
      {duration:500})
 },
            function() {
           
    $("#pag").stop().animate(
      {width:"0px"},
      {duration:500})
});
 })   

the problem is once i hover over my submenu buttons they dissapear. I really need help couse next week i have  to show my teacher my work and i can't figure how to solve this problem.