Hendricus
05-17-2008, 12:38 PM
Hi all,
I've been working on a horizontal css menu with a horizontal submenu. I thought I had things up and running until I encountered the IE z-index bug (well I think that is the reason). I've been spending blood sweat and tears on this one and can't find the solution to it, you know what Linus says; given enough eyeballs, all bugs are shallow....
Here's the code which works as expected in Firefox;
<!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">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("header_nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style>
* {
outline: none;
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: "Arial", "Helvetica", "Verdana";
font-size: 11px;
color: #FFF;
background: #FCC101;
}
#header_navigation {
position: relative;
height: 65px;
width: 100%;
overflow: hidden;
background: red;
}
#header_nav a {
font-size: 12px;
font-weight: bold;
color: #FFF;
padding: 0 30px 6px 0;
display: block;
text-decoration: none;
}
#header_nav li {
position: relative;
display: inline;
float:left;
list-style: none;
}
#header_nav li ul {
position: absolute;
top: 21px;
left: 0;
width: 1500px;
padding-top: 10px;
border-left: 1px solid #FFF;
}
#header_nav li .block {
height: 29px;
width: 2000px;
position: absolute;
top: 21px;
left: -500px;
display: none;
}
#header_nav li.off ul {
display: none;
}
#header_nav li ul li a {
font-size: 11px;
font-weight: normal;
padding: 0 9px 5px 3px;
display: block;
float: left;
background: green;
}
#header_nav li ul li span {
padding: 0 9px 5px 3px;
float: left;
}
#header_nav li ul li:first-child span {
display: none;
}
#header_nav li:hover a, #header_nav li.over a {
text-decoration: none;
}
#header_nav li:hover li a, #header_nav li.over li a {
text-decoration: none;
}
#header_nav li li a:hover {
text-decoration: underline;
}
#header_nav li:hover .block, #header_nav li.over .block {
display: block;
z-index: 9998;
background: silver;
}
#header_nav li:hover ul, #header_nav li.over ul {
display: block;
z-index: 9999;
}
</style>
</head>
<body>
<div id="header_navigation">
<ul id="header_nav">
<li class="off"><a href="#">topic 1</a>
<div class="block"> </div>
<ul>
<li><span>//</span><a href="#">option A01</a></li>
<li><span>//</span><a href="#">option A02</a></li>
<li><span>//</span><a href="#">option A03</a></li>
</ul>
</li>
<li class="off"><a href="#">longer topic 2</a>
<div class="block"> </div>
<ul>
<li><span>//</span><a href="#">option B01</a></li>
<li><span>//</span><a href="#">option B02</a></li>
<li><span>//</span><a href="#">option B03</a></li>
</ul>
</li>
<li class="on"><a href="#">topic 3</a>
<div class="block"> </div>
<ul id="tmp">
<li><span>//</span><a href="#">option C01</a></li>
<li><span>//</span><a href="#">option C02</a></li>
<li><span>//</span><a href="#">option C03</a></li>
</ul>
</li>
<li class="off"><a href="#">very long topic 4</a>
<div class="block"> </div>
<ul>
<li><span>//</span><a href="#">option D01</a></li>
<li><span>//</span><a href="#">option D02</a></li>
<li><span>//</span><a href="#">option D03</a></li>
</ul>
</li>
<li class="off"><a href="#">topic 5</a>
<div class="block"> </div>
<ul>
<li><span>//</span><a href="#">option E01</a></li>
<li><span>//</span><a href="#">option E02</a></li>
<li><span>//</span><a href="#">option E03</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Hope you guys can help me out with this one!
Hendricus
I've been working on a horizontal css menu with a horizontal submenu. I thought I had things up and running until I encountered the IE z-index bug (well I think that is the reason). I've been spending blood sweat and tears on this one and can't find the solution to it, you know what Linus says; given enough eyeballs, all bugs are shallow....
Here's the code which works as expected in Firefox;
<!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">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("header_nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style>
* {
outline: none;
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: "Arial", "Helvetica", "Verdana";
font-size: 11px;
color: #FFF;
background: #FCC101;
}
#header_navigation {
position: relative;
height: 65px;
width: 100%;
overflow: hidden;
background: red;
}
#header_nav a {
font-size: 12px;
font-weight: bold;
color: #FFF;
padding: 0 30px 6px 0;
display: block;
text-decoration: none;
}
#header_nav li {
position: relative;
display: inline;
float:left;
list-style: none;
}
#header_nav li ul {
position: absolute;
top: 21px;
left: 0;
width: 1500px;
padding-top: 10px;
border-left: 1px solid #FFF;
}
#header_nav li .block {
height: 29px;
width: 2000px;
position: absolute;
top: 21px;
left: -500px;
display: none;
}
#header_nav li.off ul {
display: none;
}
#header_nav li ul li a {
font-size: 11px;
font-weight: normal;
padding: 0 9px 5px 3px;
display: block;
float: left;
background: green;
}
#header_nav li ul li span {
padding: 0 9px 5px 3px;
float: left;
}
#header_nav li ul li:first-child span {
display: none;
}
#header_nav li:hover a, #header_nav li.over a {
text-decoration: none;
}
#header_nav li:hover li a, #header_nav li.over li a {
text-decoration: none;
}
#header_nav li li a:hover {
text-decoration: underline;
}
#header_nav li:hover .block, #header_nav li.over .block {
display: block;
z-index: 9998;
background: silver;
}
#header_nav li:hover ul, #header_nav li.over ul {
display: block;
z-index: 9999;
}
</style>
</head>
<body>
<div id="header_navigation">
<ul id="header_nav">
<li class="off"><a href="#">topic 1</a>
<div class="block"> </div>
<ul>
<li><span>//</span><a href="#">option A01</a></li>
<li><span>//</span><a href="#">option A02</a></li>
<li><span>//</span><a href="#">option A03</a></li>
</ul>
</li>
<li class="off"><a href="#">longer topic 2</a>
<div class="block"> </div>
<ul>
<li><span>//</span><a href="#">option B01</a></li>
<li><span>//</span><a href="#">option B02</a></li>
<li><span>//</span><a href="#">option B03</a></li>
</ul>
</li>
<li class="on"><a href="#">topic 3</a>
<div class="block"> </div>
<ul id="tmp">
<li><span>//</span><a href="#">option C01</a></li>
<li><span>//</span><a href="#">option C02</a></li>
<li><span>//</span><a href="#">option C03</a></li>
</ul>
</li>
<li class="off"><a href="#">very long topic 4</a>
<div class="block"> </div>
<ul>
<li><span>//</span><a href="#">option D01</a></li>
<li><span>//</span><a href="#">option D02</a></li>
<li><span>//</span><a href="#">option D03</a></li>
</ul>
</li>
<li class="off"><a href="#">topic 5</a>
<div class="block"> </div>
<ul>
<li><span>//</span><a href="#">option E01</a></li>
<li><span>//</span><a href="#">option E02</a></li>
<li><span>//</span><a href="#">option E03</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Hope you guys can help me out with this one!
Hendricus