my jquery navbar does not appear in IE8

I've been searching an answer for that for a bit and I'm not able to find an answer to my dilema. The problem is probably simple enough but i've been having a nightmare with it.

I have a navbar powered with jquery that changes the background image when you hover and click on it. Once the click action is done, there is a fade to display the other image and also hide one div and show the other.

The code works perfectly fine in Firefox and chrome but stupid IE display's only a grey bar. When you click somewhere on the bar though, the div change works so i'm not sure what is wrong there.

To view the page click here

Here's the code:

            $(document).ready(function() {
            navigationPrimary();
            menuAction();

            $("#pagePlan").hide();
            $("#pagePortes").hide();
            $("#pageAutre").hide();

            function menuAction() {             
            $("#menu li.acceuil").click(function(){
                $("#main").show();
                $("#pagePlan").hide();
                $("#pagePortes").hide();
                $("#pageAutre").hide();
                $("#menu li.acceuil a").css("background-position","0px -100px");
                $("#menu li.plan a").css("background-position","-150px 0px");   
                $("#menu li.portes a").css("background-position","-300px 0px");
                $("#menu li.services a").css("background-position","-450px 0px");
                $("#header img.estim").show();
                return false;                       
            });


            $("#menu li.plan").click(function(){
                $("#main").hide();
                $("#pagePlan").show();
                $("#pagePortes").hide();
                $("#pageAutre").hide();
                $("#menu li.acceuil a").css("background-position","0px 0px");
                $("#menu li.plan a").css("background-position","-150px -100px");    
                $("#menu li.portes a").css("background-position","-300px 0px");
                $("#menu li.services a").css("background-position","-450px 0px");
                $("#header img.estim").hide();
                return false;                   
            });

            $("#menu li.portes").click(function(){
                $("#main").hide();
                $("#pagePlan").hide();
                $("#pagePortes").show();
                $("#pageAutre").hide();
                $("#menu li.acceuil a").css("background-position","0px 0px");
                $("#menu li.plan a").css("background-position","-150px 0px");   
                $("#menu li.portes a").css("background-position","-300开发者_StackOverflowpx -100px");
                $("#menu li.services a").css("background-position","-450px 0px");
                $("#header img.estim").hide();      
                return false;                   
            });

            $("#menu li.services").click(function(){
                $("#main").hide();
                $("#pagePlan").hide();
                $("#pagePortes").hide();
                $("#pageAutre").show();
                $("#menu li.acceuil a").css("background-position","0px 0px");
                $("#menu li.plan a").css("background-position","-150px 0px");   
                $("#menu li.portes a").css("background-position","-300px 0px");
                $("#menu li.services a").css("background-position","-450px -100px");
                $("#header img.estim").hide();  
                return false;                       
            });
            }


        });

        function navigationPrimary() {
        $('#menu li').removeClass('hover');
        $('#menu li a')
            .css({ opacity: 1.0 })
            .mouseover(function() { 
                $(this).stop().animate({opacity: 0.0}, 300);
                })
            .mouseout(function() {
                $(this).stop().animate({opacity: 1.0}, 1000);
            });
        }

Thank you in advance

It looks like the LI's in your UL are all floating, but you aren't clearing the float. Try adding this to your css, and then adding class clearfix to your #menu ul

/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 

.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

Clearfix compliments of html5boilerplate