Problem with multi level pop out menu in IE8
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 Indus开发者_开发百科try</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 & 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 & 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);
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.
Multilevel CSS Menu<br>
Demo <a href="www.mremind.com">Here</a><br>
<h2>Css For Menu</h2>
<p>
/**
* MAIN NAVIGATION
**/
#mainNav {`enter code here`
height:60px;
margin: 0 auto;
padding-left: 15px;
width:1000px;
vertical-align: middle;
}
#mainNav ul{
list-style-type:block;
list-style-image:none;
background:red;
margin: 0;
padding-right: 0px;
padding-left: 0px;
line-height: 100%;
-khtml-border: 1px solid #BFDBD7;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
vertical-align: middle;
}
/************************************** Main Navigation boxes ******************************************************/
#mainNav ul li.navItems{
float:left;
display:inline-block;
width:94px;
height:60px;
border-left:solid 1px #D7D7D7;
}
#mainNav ul li.navItems:hover{
background:#034693;
}
#mainNav ul li.navItems:current{
}
#mainNav ul li.navItems > a{
width:94px;
height:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#4D4D4D;
display:block;
line-height:5.5em;
text-decoration:none;
text-align:center;
}
#mainNav ul li.navItems a:hover{
color:#FFF;
}
#mainNav ul li.navItems:hover a{
color:#FFF; /*keeps main nav text white upon rollover*/
}
#mainNav ul li.navItems:hover ul a{
color:#4D4D4D; /*stops sublinks from being white */
}
/* Dropdown List */
#mainNav ul li.navItems ul{
background:#FAFAFA;
border:1px solid #CCC;
list-style:none;
position:absolute;
display:none;
width:250px;
z-index:100;
}
#mainNav ul li.navItems ul li
{
padding: 10px 0;
font-size: 13px;
line-height: 1.5em !important;
border-bottom: 1px solid #CCC;
white-space: nowrap;
text-align: left;
}
#mainNav ul li.navItems ul li a{
font-size: 13px;
line-height: 1.5em !important;
text-align: left;
text-decoration: none;
padding-left:5px;
}
#mainNav ul li.navItems:hover ul li > a:hover{
background:#034693;
color:#FFF;
}
#mainNav ul li.navItems:hover ul li:hover{
background:#034693;
color:#FFF;
}
#mainNav ul li.navItems:hover ul li:hover > a{
background:#034693;
color:#FFF;
}
#mainNav ul li.navItems:hover ul.secondul{
display:block;
position:absolute;
}
/************************************** Sub Menu boxes ******************************************************/
#mainNav ul.secondul li.MarketingLI:hover ul
{
display:block;
position:absolute;
}
#mainNav ul.secondul li.MarketingLI ul{
width:200px;
padding:0;
font-size:13px;
line-height:1.5em !important;
border-bottom:1px solid #CCC;
white-space:nowrap;
text-align:left;
display:none;
top:0;
margin-left:100%;
}
</p><br>
<br>
<h2>HTML</h2><br>
<p>
<div id="mainNav">
<ul >
<li class="navItems"><a href=""></a> </li>
<li class="navItems" ><a class="first" href="#"></a>
<ul class="secondul">
<li class="MarketingLI"><a class="first" href=""></a>
<ul >
<li ><a href="">2nd Level 1</a>
</li>
<li ><a href="">2nd Level 1</a>
</li>
<li ><a href="">2nd Level 1</a>
</li>
</ul>
</li>
<li><a href=""></a>
</li>
<li><a href="#"></a></li>
</ul>
</li>
<li class="navItems"><a href=""></a>
</li>
<li class="navItems"><a href=""></a></li>
<li class="navItems"><a href=""></a> </li>
<li class="navItems"><a href=""></a> </li>
</ul>
<!--mainNav-->
</div>
</p>
加载中,请稍侯......
精彩评论