Problème menu déroulant sous internet explorer 8

Salut tous le monde,

Voilà, j'ai commencé à développer mon propre thème sous wordpress. Tous à l'aire d'aller pour le moment sauf le menu déroulant qui s’affiche DERRIÈRE le slider en page d'accueil comme vous pouvez le voir sur mon site : http://www.vangogh.byethost14.com/

Voici le code CSS
et merci d'avance !

 #menu_bar{
 
margin-right:0px;
 background: #FF6600 url('../img/menu_bg.gif') top left repeat-x;
  height: 40px;
  clear: both;
}
 
ul#menu_bar{
margin:0;
padding:0;/*set both to zero to remove browser inconsistencies*/
list-style-type:none;/*get rid of bullet points*/
height:40px;/*just to avoid some possible float issues*/
width: 100%;
 
}
#menu_bar li{
float:left;/*float the li element so the menu's horizontal...*/
width:150px/*...and set the width*/
}
 
#menu_bar li a{
   text-transform : uppercase;
 
display:block;/*make the link a block element...*/
width:150px;/*...with a fixed width...*/
line-height:40px;/*...and set the line-height to vertically centre the text*/
text-align:center;/*horizontally centre the text...*/
color:white;/*...colour it white...*/
text-decoration:none;/*...and remove the default underline*/
  background: #FF6600 url('../img/menu_bg.gif') top left repeat-x;
 
 
}
 
#menu_bar li a:hover{
 
 
/*change the text colour on :hover*/
}
 
 
ul#menu_bar, #menu_bar ul{/*remove the bullets from the dropdown ul as well*/
margin:0;
padding:0;
list-style-type:none;
height:40px;
}
 
#menu_bar li{
float:left;
width:152px;
position:relative;/*set position:relative as the start point for absolutely positioning the dropdown*/
}
 
#menu_bar li a{
 
margin-right:10px;
display:block;
width:100%;
line-height:40px;
text-align:center;
color:white;
text-decoration:none;
  background: #FF6600 url('../img/menu_bg.gif') top left repeat-x;
border:solid, white;
}
 
#menu_bar li a:hover{
    opacity: 1;
  background:#f6fe21;
color:black;
}
 
#menu_bar li ul{
display:none;/*hide the dropdown*/
left:0;/*...align the left edge with the left edge of the parent li...*/
top:32px;/*...and 32px down from the top - 30px height + 2px for the border*/
position: absolute;
z-index: 9999;
 
}
 
#menu_bar li:hover ul {
display:block/*display the ul when the parent li is hovered*/
}
 
#menu_bar li ul a{
  background: #FF6600 url('../img/menu_bg.gif') top left repeat-x;
/*give the dropdown a different background colour*/
opacity: 1;
 }

Modifié par mbaz (09 Dec 2014 - 18:59)