Problème avec le menu horizontal et IE7

Question

J'ai fait le menu horizontal avec certains éléments de sous-menu. Malheureusement, les éléments de sous-menu de troisième niveau n'apparaissent pas dans IE7. Html entier, code css et le menu de travail, vous pouvez voir à http://jsfiddle.net/XzCMr/

Comment je l'ai découvert, IE7 cache troisième niveau au deuxième niveau.

Si je change la marge de css

#main-nav li ul ul { 
    width:202px; 
    margin: -29px 0 0 218px; 
} 

Pour

#main-nav li ul ul { 
    width:202px; 
    margin: -29px 0 0 100px; 
} 

Je peux voir le troisième niveau imbriqué dans le deuxième niveau. http://jsfiddle.net/XzCMr/1/

Le menu entier code html:

<ul id="main-nav"> 
    <li class="first-level"> 
     <a href="#" class="mainlevel_main_menu" id="active_menu_main_menu">Item1</a> 
    </li> 
    <li class="first-level"> 
     <a href="#" class="mainlevel_main_menu" >Item2</a> 
     <ul>  
      <li> 
       <a href="#" class="sublevel_main_menu" >Test</a> 
       <ul> 
        <li> 
         <a href="#" class="sublevel_main_menu" >Test</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#" class="sublevel_main_menu" >Test</a> 
      </li> 
      <li> 
       <a href="#" class="sublevel_main_menu" >Test</a> 
       <ul> 
        <li> 
         <a href="#" class="sublevel_main_menu" >Test</a> 
        </li> 
        <li> 
         <a href="#" class="sublevel_main_menu" >Test</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#" class="sublevel_main_menu" >Test</a> 
      </li> 
      <li> 
       <a href="#" class="sublevel_main_menu" >Test</a> 
      </li> 
     </ul> 
    </li> 
    <li class="first-level"> 
     <a href="#" class="mainlevel_main_menu" >Item3</a> 
    </li> 
</ul> 

Code Css:

/*first level*/ 

#main-nav, 
#main-nav ul, 
#main-nav ul ul, 
#main-nav ul ul ul, 
#main-nav ul ul ul ul{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

#main-nav a { 
    display: block; 
} 

#main-nav li { 
    float: left; 
} 

#main-nav li a { 
    display: block; 
    padding-left: 15px; 
    padding-right: 15px; 
    text-decoration: none; 
    color: #484848; 
    background: transparent; 
    font-weight: normal; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:20px; 
    background:url(../images/circle_small.png); 
    background-repeat:no-repeat; 
    background-position:0px 8px; 
} 

#main-nav li a.mainlevel_main_menu#active_menu_main_menu, 
#main-nav li a.mainlevel_main_menu:hover{ 
    color:#e5ae38; 
} 


/*second level*/ 

#main-nav li ul { 
    position: absolute; 
    left: -999em; 
    width:218px; 
    padding-top:10px; 
    padding-bottom:10px; 
    /*border: 1px solid #F00;*/ 
} 

#main-nav li ul li a{ 
    width:218px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
    font-weight:normal; 
    background:none; 
    padding-left:15px; 
    color: #3f3f3f; 
    line-height:19px; 
} 

#main-nav li ul li a:hover{ 
    font-weight:bold; 
} 

#main-nav a.sublevel_main_menu.sub-pointer{ 
    background:url(../images/rightpointer.gif); 
    background-repeat:no-repeat; 
    background-position:200px 3px; 

    /*border: 1px solid #F00;*/ 
} 


/*third level*/ 

#main-nav li ul ul { 
    width:202px; 
    margin: -29px 0 0 100px; 
} 

/*fourth level*/ 
#main-nav li ul ul ul{ 
    padding-top:10px; 
    padding-bottom:10px; 
} 



#main-nav li:hover ul ul, 
#main-nav li:hover ul ul ul, 
#main-nav li:hover ul ul ul ul{ 
    left: -999em; 
} 

#main-nav li:hover ul, 
#main-nav li li:hover ul, 
#main-nav li li li:hover ul, 
#main-nav li li li li:hover ul{ 
    width:218px; 
    left: auto;  
    background:url(../images/submenubg.png); 
    background-repeat:no-repeat; 
    background-position:0 4px; 
    background-color: #f7f7f7; 
    filter:alpha(opacity=90); /* IE's opacity*/ 
    opacity: 0.90; 
} 

Quel est le problème avec ça? Votre aide serait appréciée.

Answer 1

Merci pour vos réponses. J'ai enfin trouvé le problème. Le voici:

filter:alpha(opacity=90); /* IE's opacity*/ 

Donc transparence menu ruiné dans IE7. Vous pouvez essayer par vous-même:

http://jsfiddle.net/XzCMr/7/