水平菜单和IE7有什么问题？

Question

我用一些子菜单项制作了水平菜单。可惜我在IE7中没有出现第三级子菜单项。完整的 html、css 代码和工作菜单，您可以在 https://jsfiddle.net/XzCMr/ 看到

我是怎么发现的，IE7在第二级隐藏了第三级。

如果我改变 css 边距

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

到

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

我可以看到第三层嵌套在第二层中。 https://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 中的菜单。你可以自己试试：

https://jsfiddle.net/XzCMr/7/