horizontal css menu & submenu works perfect in FF... but IE :'(
newbie
Posted: Fri, 2008-05-16 10:46
Hi all,
I'm working on a horizontal css menu. I've managed to get it working in Firefox. But as I opened it in IE7 it didn't work as expected (which kinda was to be expected). And it didn't do a darn thing in IE6.
If you look at this code in Firefox you'll see how it's supposed to work;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<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;
}
#header_container {
height: 345px;
width: 100%;
position: relative;
z-index: 3;
}
#header_nav {
position: relative;
}
#header_nav a {
font-size: 12px;
font-weight: bold;
color: #FFF;
padding-right: 30px;
}
#header_nav li {
list-style: none;
display: block;
float: left;
background: red;
}
#header_nav li .block {
height: 24px;
width: 100%;
position: absolute;
top: 15px;
left: 0;
background: purple;
display:none;
}
#header_nav li ul {
position: absolute;
top: 15px;
left: auto;
border-left: 1px solid #FFF;
background: green;
}
#header_nav li ul li {
margin-top: 10px;
}
#header_nav li ul li a {
font-size: 11px;
font-weight: normal;
padding-left: 3px;
}
#header_nav li.off ul {
display: none;
}
#header_nav li:hover a {
text-decoration: none;
}
#header_nav li:hover li a {
text-decoration: none;
}
#header_nav li li a:hover {
text-decoration: underline;
}
#header_nav li:hover .block {
display: block;
z-index: 9998;
}
#header_nav li:hover ul {
display: block;
z-index: 9999;
}
</style>
</head>
<body>
<div id="header_navigation">
<ul id="header_nav">
<li class="on"><a href="#"><span>topic 1</span></a>
<div class="block"> </div>
<ul>
<li><a href="#"><span>option A01</span></a></li>
<li><a href="#"><span>option A02</span></a></li>
<li><a href="#"><span>option A03</span></a></li>
</ul>
</li>
<li class="off"><a href="#"><span>longer topic 2</span></a>
<div class="block"> </div>
<ul>
<li><a href="#"><span>option B01</span></a></li>
<li><a href="#"><span>option B02</span></a></li>
<li><a href="#"><span>option B03</span></a></li>
</ul>
</li>
<li class="off"><a href="#"><span>topic 3</span></a>
<div class="block"> </div>
<ul>
<li><a href="#"><span>option C01</span></a></li>
<li><a href="#"><span>option C02</span></a></li>
<li><a href="#"><span>option C03</span></a></li>
</ul>
</li>
<li class="off"><a href="#"><span>very long topic 4</span></a>
<div class="block"> </div>
<ul>
<li><a href="#"><span>option D01</span></a></li>
<li><a href="#"><span>option D02</span></a></li>
<li><a href="#"><span>option D03</span></a></li>
</ul>
</li>
<li class="off"><a href="#"><span>topic 5</span></a>
<div class="block"> </div>
<ul>
<li><a href="#"><span>option E01</span></a></li>
<li><a href="#"><span>option E02</span></a></li>
<li><a href="#"><span>option E03</span></a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>There is a main menu with variable width topics. Beneath each topic are the child topics of which the x position should be the same of the parent. I use the purple div (with FF opacity to make things more clear) to cover up the current active layer when you move you mouse over an other topic than current active one.
Can anyone point out to me what's going in IE7... and IE6 if possible...
Much obliged 
newbie
Posts: 3
Joined: 2008-05-16
Getting closer
Posted: Sat, 2008-05-17 12:41
Hi all,
Well I continued working on it. And 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!
Bartezz
newbie
Posts: 3
Joined: 2008-05-16
Problem solved... had to
Posted: Sat, 2008-05-17 22:44
Problem solved... had to apply z-index to parent
Cheers
newbie
Posts: 1
Joined: 2008-07-02
Hai Friend
Posted: Wed, 2008-07-02 07:50
Hai friend
really sorry for disturbing you i too have same problem where you change the Z-index value can u post that code waiting for ur reply bye take care