Compatibilité IE

Bonjour,

Je suis vraiment perdu, je me casse la tête depuis des jours pour créer un menu un peu dynamique, fonctionnel sous IE. Ca marche très bien sur les autres navigateurs, j'aimerais au moins que les sous-meus s'affichent correctement sur IE.

Je ne vois pas de meilleure chose à faire que de vous mettre le code (html puis CSS) pour bien expliquer.

Merci !

<div id="menu" class="menu">
<ul id="menu" class="menu unstyled">
<li class="niv1"><a href='accueil.html'>Accueil</a></li>
<li class='niv1'><a href='menu1.html'>Menu1</a>
<ul class='niv2 unstyled'>
<li><a href='sous-menu1.html'>Menu1</a></li>
<li><a href='sous-menu2.html'>Menu2</a></li>
<li><a href='sous-menu3.html'>Menu3</a></li>
</ul>
</li>
<li class='niv1'><a href='menu2.html'>Menu2</a>
<ul class='niv2 unstyled'>
<li><a href='sous-menu1.html'>Menu1</a></li>
<li><a href='sous-menu2.html'>Menu2</a></li>
<li><a href='sous-menu3.html'>Menu3</a></li>
</ul>
</li>
<li class='niv1'><a href='menu3.html'>Menu3</a></li>
<li class='niv1'><a href='menu4.html'>Menu4</a></li>
</ul>
</div>

et le css:

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);

/* Menu */
div.menu { 
background: none;
clear: both;
margin: 0;
padding: 0;
height: 40px;
position: relative;
z-index: 100;
width: 100%;
}
div.menu ul.menu {
background: #febf01 ; /* Old browsers */
background: -moz-linear-gradient(top,  #febf01  0%, #ff9911  99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febf01 ), color-stop(99%,#ff9911 )); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #febf01  0%,#ff9911  99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #febf01  0%,#ff9911  99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #febf01  0%,#ff9911  99%); /* IE10+ */
background: linear-gradient(to bottom,  #febf01  0%,#ff9911  99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01 ', endColorstr='#ff9911 ',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px; 
-webkit-box-shadow:  0px 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow:  0px 1px 2px 1px rgba(0, 0, 0, 0.5);
width: 960px;
height: 40px;
margin: 0 auto;
padding: 0;
text-align: center;
}
div.menu ul.menu li.niv1 {
width: 160px;
float: left;
border: none;
font-size: 1.1em;
line-height: 40px;
vertical-align: middle;
margin: 0;
padding: 0;
background: none; 
position: relative;
z-index: 150;
}

div.menu ul.menu li.niv1 a {
display: block; 
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #cc2222;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bolder;
font-size: 1.15em;
}
div.menu ul.menu li.niv1:hover a {
color: #fff;
}
div.menu ul.menu li.niv1:hover {
color: #fff;
background: #333; 
background: -moz-linear-gradient(top,  #333 0%, #000 99%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(99%,#000)); 
background: -webkit-linear-gradient(top,  #333 0%,#000 99%); 
background: -o-linear-gradient(top,  #333 0%,#000 99%); 
background: -ms-linear-gradient(top,  #333 0%,#000 99%); 
background: linear-gradient(to bottom,  #333 0%,#000 99%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#000',GradientType=0 ); 
}
div.menu ul.menu li.niv1:first-child {
-webkit-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
}
div.menu ul.menu li.niv1:last-child {
-webkit-border-radius: 0px 0px 5px 0px;
border-radius: 0px 0px 5px 0px;
}
ul.menu li.niv1 > ul.niv2 {
height: 0;
overflow: hidden;
opacity: 0;
transform: scaleY(0); 
transform-origin: 50% 0; 
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
ul.menu li.niv1:hover > ul.niv2 {
height: auto;
transform: scaleY(1);
opacity: 1;
}
div.menu ul.menu li.niv1 ul.niv2 {
background: rgba(255,255,255,0.95);
width: 230px; 
position: absolute;
padding: 0;
text-align: left;
border: dotted 1px #aaa;
border-top: solid 5px #cc2222;
z-index: 90; 
}
div.menu ul.menu li.niv1 ul.niv2 li {
margin: 0;
padding: 0;
padding-left: 5px;
line-height: 30px;
}
div.menu ul.menu li.niv1 ul.niv2 li:hover {
background: rgba(255,153,17,0.3);
}
div.menu ul.menu li.niv1 ul.niv2 li a {
color: #cc2222;
font-weight: 400;
font-size: 1em;
}
div.menu ul.menu li.niv1 ul.niv2 li a:hover {
color: #cc2222;
}

Encore merci