Member Avatar for 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.

  • 3 Contributors
  • 4 Replies
  • 128 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Bounce182
Member Avatar for 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.

Member Avatar for 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 ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.