Problem with horizontal menu and IE7

Question

Hi,

I made horizontal menu with some sub-menu items. Unfortunately I third level sub-menu items does not appear in IE7. Whole html, css code and working menu you can see at http://jsfiddle.net/XzCMr/

How I found out, IE7 hides third level in second level.

If I change css margin from

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

To

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

I can see third level nested in second level. http://jsfiddle.net/XzCMr/1/

The whole menu html code:

<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 code:

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

What is wrong with that? Your help would be appreciated.

Answer 1

Thanks for your answers. I've finally found the problem. Here it is:

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

So transparency ruined menu in IE7. You can try by yourself:

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