Desperately need help with jQuery

Desperately need help with jQuery

Hello all.  I am in way over my head with this and I would love some help.  I program PHP, MySQL, HTML and others, but I never could get down jQuery and javascript. 
Anyways, I am working on a navigation menu and on mouseover the menu comes out, however, when I go to next area where the menu pops out to a sub, it goes over the other one and so on! 

Here is what I have:


  1.   $(function(x){
     
        $('a.link-sub').mouseover(function(e) {
                // Add active class to section title
                 $(this).addClass('active');
                  $('.sub-menu').attr( "style", "display:block;position:absolute;top:0;left:-145px;background:#454545; padding:0px 15px; width:100px;");
      },
      function () {
        $('a.link-sub').mouseout().hide();
      }
             
        );
       
            $('.showhide-account').click(function(e) {
                // Add active class to section title
               
                // Open up the hidden content panel
                $('.sub-menu').attr( "style", "display:none;");
     
                //e.preventDefault();
        });
        $('#wrapper-bg').mouseover(function(e) {
                // Add active class to section title
               
                // Open up the hidden content panel
                $('.sub-menu').attr( "style", "display:none;");
     
                //e.preventDefault();
        });
       
     });
     
      $(function(y){
         $('a.link-sub2').mouseover(function(f) {
                // Add active class to section title
                 $(this).addClass('active');
                  $('.sub-menu2').attr( "style", "display:block;position:absolute;top:0;left:-145px;background:#454545; padding:0px 15px; width:100px;");
      },
      function () {
        $('.sub-menu2').hide();
      }
             
        );
       
             $('.showhide-account').click(function(f) {
                // Add active class to section title
               
                // Open up the hidden content panel
                $('.sub-menu2').attr( "style", "display:none;");
     
                //e.preventDefault();
        });
        $('#wrapper-bg').mouseover(function(f) {
                // Add active class to section title
               
                // Open up the hidden content panel
                $('.sub-menu2').attr( "style", "display:none;");
     
                //e.preventDefault();
        });

      });
      $(function(){
         $('a.link-sub3').mouseover(function(g) {
                // Add active class to section title
                 $(this).addClass('active');
                  $('.sub-menu3').attr( "style", "display:block;position:absolute;top:0;left:-145px;background:#454545; padding:0px 15px; width:100px;");
      },
      function (z) {
        $('.sub-menu3').hide();
      }
             
        );

               $('.showhide-account').click(function(g) {
                // Add active class to section title
               
                // Open up the hidden content panel
                $('.sub-menu3').attr( "style", "display:none;");
     
                //e.preventDefault();
        });
        $('#wrapper-bg').mouseover(function(g) {
                // Add active class to section title
               
                // Open up the hidden content panel
                $('.sub-menu3').attr( "style", "display:none;");
     
                //e.preventDefault();
        });
       
    });

and here is the html:

  1. <div style="position:relative">
                    <a href="#" id="acc-stats" class="link-sub"style="background: url(../images/nav/main.png) no-repeat 0 2px;    padding: 0 0 0 20px; margin-bottom: -5px; margin-top: 10px;">Main Menu</a>
                    <div class="sub-menu" style="display:none;">
                   
                    <a href="./page1.php" id="acc-stats" style="background: url(../images/nav/sub.png) no-repeat 0 2px;    padding: 0 0 0 20px; margin-bottom: 8px; margin-top: 10px;">Sub 1</a>
                   
               
                   
                    <a href="./page2.php" id="acc-stats"  style="background: url(../images/nav/sub.png) no-repeat 0 2px;    padding: 0 0 0 20px; margin-bottom:8px;">Sub 2</a>
                   
                   
                    <a href="/page3.php" id="acc-stats" style="background: url(../images/nav/sub.png) no-repeat 0 2px;    padding: 0 0 0 20px; margin-bottom:8px;">Sub 3</a>
                   
                    <a href="/page4.php" id="acc-stats" style="background: url(../images/nav/sub.png) no-repeat 0 2px;    padding: 0 0 0 20px; margin-bottom:10px;">Sub 4</a>
                    </div>

Any help would be greatly appreciated!