水平菜單和IE7的問題

Question

我做了一些子菜單項的水平菜單。不幸的是我的第三級子菜單項不會出現在IE7中。整個HTML，CSS代碼和工作菜單，你可以看到http://jsfiddle.net/XzCMr/

我如何發現，IE7隱藏第二級別的第三級。

如果我改變從

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

CSS餘量

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

我可以看到嵌套在第二級第三級。 http://jsfiddle.net/XzCMr/1/

整個菜單的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> 

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; 
} 

有什麼不好呢？您的幫助將不勝感激。

Answer 1

感謝您的回答。我終於找到了問題。這是它：

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

因此，透明度損壞了IE7的菜單。你可以自己試試：

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