Jquery Not Functioning As Expected in IE

Jquery Not Functioning As Expected in IE

I've built a website and have used JQuery for the 1st time. Everything works fine in Firefox and Safari but IE is really giving me a headache now!

The site can be seen HERE

When you roll over the main links a sub menu rolls out, when you roll over the next main link the sub menu in view scrolls back in and the one associated with the new link scrolls out - please view in either FF or Safari to see it working.

In IE the functionality of the menus just doesn't cut it??? the 1st two (Company and Services) seem to work as expected when you roll back and forth over them, but the last 2 (Portfolio and Contact) are really flakey??? They stay scrolled out when they should be scrolling back in, although sometimes they do actually scroll in, and on the last one (Contact) only one of the two links in the sub menu appears and then its not clickable????? Again please conpare between FF and IE to see what i mean.

Can anyone offer me some advice on solving this, i'm looking to get the IE version to work just as well as i have it in FF. Unfortunately I don't have any experience with javascript / jquery to fall back on so i'm just hitting my head against a brick wall at the moment.

Any help would be much appreciated!

Here is the code I used:

  1. $("#Company, #SubNavCompany a").hover(function(event){
                   $("#SubNavServices a, #SubNavPortfolio a, #SubNavContact a").stop().animate({marginLeft: -150}, 600);
                $("#SubNavServices, #SubNavPortfolio, #SubNavContact").css({zIndex: -1}, 0);
               
                   $("#SubNavCompany a").stop(true, true).animate({marginLeft: 0}, 200);
                $("#SubNavCompany").css({zIndex: 10}, 0);
                }, function() {
                $("#SubNavCompany a").delay(3000).animate({marginLeft: -150}, 600);
             });
             
             
                 $("#Services, #SubNavServices a").hover(function(event){
                  $("#SubNavCompany a, #SubNavPortfolio a, #SubNavContact a").stop().animate({marginLeft: -150}, 600);
                $("#SubNavCompany, #SubNavPortfolio, #SubNavContact").css({zIndex: -1}, 0);
               
                   $("#SubNavServices a").stop(true, true).animate({marginLeft: 0}, 200);
                $("#SubNavServices").css({zIndex: 10}, 0);
                }, function() {
                $("#SubNavServices a").delay(3000).animate({marginLeft: -150}, 600);
             });
             
             
                 $("#Portfolio, #SubNavPortfolio a").hover(function(event){
                 $("#SubNavCompany a, #SubNavServices a, #SubNavContact a").stop().animate({marginLeft: -150}, 600);
                $("#SubNavCompany, #SubNavServices, #SubNavContact").css({zIndex: -1}, 0);
               
                  $("#SubNavPortfolio a").stop(true, true).animate({marginLeft: 0, zIndex: 10}, 200);
                $("#SubNavPortfolio").css({zIndex: 10}, 0);
                }, function() {
                $("#SubNavPortfolio a").delay(3000).animate({marginLeft: -150}, 600);
             });
             
             
             $("#Contact, #SubNavContact a").hover(function(event){
                 $("#SubNavCompany a, #SubNavServices a, #SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
                $("#SubNavCompany, #SubNavServices, #SubNavPortfolio").css({zIndex: -1}, 0);
               
                   $("#SubNavContact a").stop(true, true).animate({marginLeft: 0, zIndex: 10}, 200);
                $("#SubNavContact").css({zIndex: 10}, 0);
                }, function() {
                $("#SubNavContact a").delay(3000).animate({marginLeft: -150}, 600);
             });