javascript - IE8中多级弹出菜单的问题

Question

我从 this 制作了一个多级弹出菜单教程，here's the page我正在努力。

它在除 IE8 之外的所有浏览器中都运行良好，第三层只是隐藏在第二层之后。

谁能看出是什么问题？

代码如下:

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

这是 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);

Answer 1

这是您的 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">

顶部的那些评论让 IE 使用 Quirks Mode .

确保<!DOCTYPE html ..是第一行，IE 将使用标准模式，您的问题可能会得到解决。

---

在你的 CSS 里面，#nav li:hover ul.sub ，你需要删除:

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

使用这些会导致 overflow: hidden -esque 效果，这就是为什么您的子菜单看不到的原因。