Problem with horizontal menu and IE7

[Bounce182]

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.

[DesigningStudio]

Its coming like that because of this css style:
#main-nav li ul ul{ width:202px; margin: -29px 0 0 100px; }

All you need is you have to increase the 100 to 200 or 300 as you like it. Here 100px should be taken as second level width that much width should be given margin left here. So that it will come next to the second level.

[Bounce182]

Thanks for reply. I've tried your suggestion, but still got the same. Have you tested the code in IE7 ?(http://jsfiddle.net/XzCMr/)

[macgurl70]

Found this page, it may have what you are looking for
http://www.alistapart.com/articles/horizdropdowns/

[Bounce182]

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/

Any ideas about transparency ?