Menu site web qui ne s'affiche pas sur internet explorer8

Bonjour à toute la communauté,je vous expose mon problème:
Mon menu ci dessous s'affiche sur google chrome mais pas sur Internet explorer 8
ci dessous vous trouverez mon code html\css
css

<style>
#barreNav, #barreNav ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 30px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */

}

#barreNav /* Ensemble du menu */
{
/* Modification de l'affichage du texte. */
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial */
font-size : 12px; /* hauteur du texte : 12 pixels */
/* Mise en place des bordures. */
border-width: 1px; /* On définit leurs l'épaisseurs. */
border-style: solid; /* On les définient comme solide. */
border-color: #8F050E; /* On met les bordures en rouge. */
border-bottom-width: 0; /* On enlève la bordure du dessous. */
border-top-width: 0; /* Et la bordure du dessus. */
border-radius: 0px 0px 6px 6px; /* Arrondissement des coins en bas. */
/* Autres. */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); /* Mise en place d'ombres sous la barre */
display: -moz-box;
background: linear-gradient(#C32420, #8F050E) repeat scroll 0 0 transparent; /*Fond de la barre (FF)*/
background:-webkit-linear-gradient(#C32420 0%, #8F050E 100%); /*Fond de la barre (Chrome, Safari)*/
/* margin: 0 0 16px */; /* On met une marge en dessous pour éviter que le reste du site soit collé à la barre */
position: relative; /* On lui met un positionnement relatif. */
width: 100%;
z-index: 10;
}

#barreNav a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 158px; /* largeur */
}

#barreNav li /* Elements des listes */
{
float : left;
/*width: 150px;/* On lui met 1px de moins que la taille des liens afin qu'il n'y ai pas de bordures rouges. */
background: linear-gradient(#C32420, #8F050E) repeat scroll 0 0 transparent; /*Fond de la barre (FF)*/
background:-webkit-linear-gradient(#C32420 0%, #8F050E 100%); /*Fond de la barre (Chrome, Safari)*/
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */


}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #barreNav li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#barreNav li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
border-left: 1px solid #8F050E;
border-radius: 0 0 0 0;
}


#barreNav li ul li /* Éléments de sous-listes */
{
width: 158px; /* On lui met 1 pixel de moins pour ne pas voir la border. */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #barreNav li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#barreNav li ul ul
{
margin : -30px 0 0 166px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète */
html>body #barreNav li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}


#barreNav a:hover/* Lorsque la souris passe sur un des liens */
{
color: #FFFFFF; /* Le texte ne change pas de couleur. */
background: #7e0808; /* En revanche, le fond devient plus foncé. */
}


#barreNav li:hover ul ul, #barreNav li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#barreNav li:hover ul, #barreNav li li:hover ul, #barreNav li.sfhover ul, #barreNav li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#barreNav ul.active
{
color: #FFFFFF; /* Le texte ne change pas de couleur. */
background: #7e0808; /* En revanche, le fond devient plus foncé. */
}
</style>



code

<!-- On créer un espace pour l'en-tête -->
<div id="header">

<!-- On creer un espace pour la barre de navigation -->
<div id="navigation">
<!-- On creer une nouvelle liste a puce qui seras notre barre de navigation -->
<ul id="barreNav">
<!-- Le premier lien de la barre de navigation seras un retour a l'acceuil -->
<li><a href="\\localhost\group.php">Accueil</a>
<ul>
<li><a href="#">Presentation NIG</a></li>
<li><a href="#">Notre Vision</a></li>
<li><a href="#">Mot du PDG </a></li>
</ul>
</li>


<!-- On va ensuite creer une categorie activites -->
<li>
<a href="#">Activités
<ul>
<li><a href="#">logistique et transport</a>
</li>
<li><a href="#">Batiments et T.P</a>

<li><a href="#">ressources humaines</a>
</li>
<li><a href="#">immobilier</a></li>
</ul></a>


</li>

<!-- On créer une catégorie réservée aux realisations -->
<li>
<a>Réalisations</a>
<ul>
<li><a href="#">Projets</a></li>
<li><a href="#">Chantiers</a></li>

</ul>
</li>

<!-- On créer ensuite les autres bouton -->
<li><a href="#">Partenaires</a>
<ul>
<li><a href="#">Stratégiques</a></li>
<li><a href="#">Economisques</a></li>
<li><a href="#">Socials</a></li>
</ul>
</li>
<li><a href="#">Contacts</a></li>
<li><a href="http://berzerkersgaming.eu/forum/index.php">Gallerie</a></li>
</ul>
</div>
</div>