I’ve made a multi level pop out menu from this tutorial, here’s the page

Question

0

Editorial Team

Asked: May 23, 20262026-05-23T08:23:13+00:00 2026-05-23T08:23:13+00:00

I’ve made a multi level pop out menu from this tutorial, here’s the page

0

I’ve made a multi level pop out menu from this tutorial, here’s the page I’m working on.

It’s working perfectly fine in all browsers bar IE8, the 3rd tier just hides behind the second tier.

Can anyone see what the problem is?

Here’s the code:

    <div id="menu">
    <div id="menu-edge"></div>   

<ul id="nav">
    <li class="top"><a class="top_link" href="http://www.match.ac.uk">Home</a></li>
    <li class="top"><a class="top_link" href="/about.php">About</a>
        <ul class="sub" style="margin-left:0px;">
            <li><a class="fly" href="/theteam.php">The Team</a>
                <ul class="sub-popout">
                    <li><a href="/researchers.php">Researchers</a></li>
                    <li><a href="/management.php">Management</a></li>
                    <li><a href="/investigators.php">Investigators</a></li>
                    <li><a href="/students.php">PhD Students</a></li>                                                            
                </ul>
            </li>
            <li><a href="/vision.php">Our Vision</a></li>
            <li><a href="/strategy.php">Strategy</a></li>
            <li><a href="/achievements.php">Achievements</a></li>
            <li><a href="/literature.php">Literature</a></li>
        </ul>    
    </li>
    <li class="top"><a class="top_link" href="/membership.php">Membership</a>
        <ul class="sub" style="margin-left:0px;">
            <li><a href="/level1.php">Level 1 - Micro</a></li>
            <li><a href="/level2.php">Level 2 - SME/Division</a></li>            
            <li><a href="/level3.php">Level 3 - Large</a></li>
            <li><a href="/level1.php">Level 4 - Macro</a></li>
            <li><a href="/additional.php">Additional Services</a></li>                        
        </ul>
    <li class="top"><a class="top_link" href="/research.php">Research</a>
        <ul class="sub" style="margin-left:0px;">
            <li><a href="/projecti.php">Project I - Tools for Industry</a></li>
            <li><a href="/projectii.php">Project II - Economic Evaluation</a></li>    
            <li><a href="/projectiii.php">Project III - User Needs</a></li>
            <li><a href="/projectiv.php">Project IV - Implementation Issues</a></li>
        </ul>                
    <li class="top"><a class="top_link" href="/publications.php">Publications</a>
        <ul class="sub" style="margin-left:0px;">
            <li><a href="/2011.php">2011</a></li>
            <li><a href="/2010.php">2010</a></li>
            <li><a href="/2009.php">2009</a></li>
            <li><a href="/2008.php">2008</a></li>
            <li><a href="/2007.php">2007</a></li>
            <li><a href="/2006.php">2006</a></li>
            <li><a href="/2005.php">2005</a></li>
            <li><a href="/2004.php">2004</a></li>
            <li><a href="/deliverables.php">Deliverables</a></li>
            <li><a href="/innovative-manufacturing.php">Innovative Manufacturing</a></li>                                                                                                                    
        </ul>
    <li class="top"><a class="top_link" href="/news-events.php">News &amp; Events</a>
        <ul class="sub" style="margin-left:0px;">
            <li><a href="/news.php">News</a></li>
            <li><a href="/events.php">Events</a></li>
            <li><a href="/training.php">Training &amp; Workshops</a></li>
        </ul>                                
    <li class="top"><a class="top_link" href="/partners.php">Partners</a>
    <li class="top"><a class="top_link" href="/contact.php">Contact Us</a>
</ul>
</div>

CSS:

#menu {
    float:right;
    height:33px;
    background-color:#00B1E8;
    margin-top:14px;
    width:749px;
    }


#nav {
    padding:5px 0 0 0;
    margin:0 0 0 79px;
    list-style:none;
    height:27px;
    background-color:#00B1E8;
    position:relative;
    z-index:500;
    font-size:13px;
    }
#nav li.top {display:block; float:left; height:33px;}

a.no-sub {
    color:#ffffff;
    display:block; float:left; height:33px; text-decoration:none; margin-right: 20px; cursor:pointer;
    }

a.no-sub:hover {
    color:#1D71B8;
    display:block; float:left; height:33px; text-decoration:none; margin-right: 20px; cursor:pointer;
    }   

#nav li a.top_link {display:block; float:left; height:33px; color:#fff; text-decoration:none; margin-right: 20px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#1D71B8;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub {
    left:1px;
    top:26px;
    padding:3px;
    white-space:nowrap;
    width:250px;
    height:auto;
    z-index:300;
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#00B1E8,endColorStr=#00B1E8);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00B1E8,endColorstr=#00B1E8)";
    zoom: 1;
    background-color: rgba(54, 169, 225, 0.8);  
    }

#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:250px; font-weight:normal;}

#nav li:hover ul.sub li a {
    display:block;
    height:18px;
    width:250px;
    line-height:18px;
    text-indent:5px;
    color:#fff;
    text-decoration:none;
    }

#nav li ul.sub li a.fly
{background-color:#0e71b8;}
#nav li:hover ul.sub li a:hover 
{background-color:#0e71b8;}
#nav li:hover ul.sub li a.fly:hover
{background-color:#0e71b8;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:251px;
top:-3px; 
background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#00B1E8,endColorStr=#00B1E8);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00B1E8,endColorstr=#00B1E8)";
    zoom: 1;
    background-color: rgba(54, 169, 225, 0.8); padding:3px; white-space:nowrap; width:250px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background-color:#0e71b8; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}

Here’s the JS:

stuHover = function() {
    var cssRule;
    var newSelector;
    for (var i = 0; i < document.styleSheets.length; i++)
        for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
            {
            cssRule = document.styleSheets[i].rules[x];
            if (cssRule.selectorText.indexOf("LI:hover") != -1)
            {
                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
            }
        }
    var getElm = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<getElm.length; i++) {
        getElm[i].onmouseover=function() {
            this.className+=" iehover";
        }
        getElm[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-23T08:23:14+00:00

This is the top of your HTML:

<!-- header -->
<!-- SEO elements to be edited per page, enter your keywords between the "" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Those comments at the top are making IE use Quirks Mode.

Make sure <!DOCTYPE html .. is the very first line, and IE will use Standards Mode and your problem will probably be resolved.

In your CSS, inside #nav li:hover ul.sub, you need to remove:

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#00B1E8,endColorStr=#00B1E8);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00B1E8,endColorstr=#00B1E8)";

using those causes an overflow: hidden-esque effect, and that’s why your submenus can’t be seen.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I’ve made a multi level pop out menu from this tutorial, here’s the page

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply