CSS dropdown menu (3 lvl's) and IE6 [Archive]

Repox

03-13-2007, 08:21 AM

Hi forum!

My first post here, in hope of some help with my problem. :)

The menu looks as it should, and works properly in both FF and Opera. IE6/7 is my problem.

The problem is that none of my :hovers work in IE and I've tried so long now, that I've realised I need som help.

Hope you can help or redirect me to proper group. :)

example can be seen at http://err0r.dk/test.php

<html>
<head>
<title>menu test</title>

<style>

body
{
background-color: #000000;
}

/* Lvl 1 */
ul
{
font-size: 11px;
font-family: Verdana, Sans Serif;
margin: 0px;
padding: 0px;
list-style-type: none;
width: 300px;

}

ul li
{

float: left;
padding: 3px;
height: 16px;
margin: 0px 5px 0px 8px;
position: relative;
}

ul li a
{

text-decoration: none;
display:block;
color: #FFFFFF;
font-weight: bold;

}

/* Lvl 2 */

ul li ul
{

position: absolute;
top: 20px;
left: -8px;
display: none;
width: 150px;

}

ul li ul li
{
display: block;
background-color: #FFFFFF;
opacity: 0.8;
-moz-opacity: 0.8;
filter:alpha(opacity=80);
width: 150px;

}

ul li ul li:hover, ul li ul li.over
{
background-color: #FFFFFF;
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}

ul li ul li a
{

display: block;
text-decoration: none;
color: #000000;
font-weight: bold;
width: 150px;
padding: 2px;
}

ul li:hover ul, ul li.over ul
{
display: block;
}

/* Lvl 3 */

ul li ul li
{
position: relative;
}

ul li ul li ul
{
position: absolute;
top: -2px;
left: 150px;
display: none;
visibility: hidden;
width: 150px

}

ul li ul li:hover ul, ul li ul li.over ul
{

display: block;
visibility: visible;
clear: both;
width: 150px;
padding: 2px;
}

ul li ul li ul li:hover, ul li ul li ul li.over
{
background-color: #FFFFFF;
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}

ul li ul li ul li a
{
text-decoration: none;
color: #000000;
font-weight: bold;

}

ul li ul li:hover ul, ul li ul li.over ul
{
display: block;
}

</style>

</head>
<body>

<script language="javascript">

startList = function() {
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("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>

<ul id="nav">
<li><a href="#">Punkt 1</a></li>

<li><a href="#">Punkt 2</a>
<ul>
<li class"over"><a href="#">Punkt 2.1</a></li>

<li><a href="#">Punkt 2.2</a>
<ul>
<li><a href="#">Punkt 2.2.1</a></li>

<li><a href="#">Punkt 2.2.2</a></li>

<li><a href="#">Punkt 2.2.3</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">Punkt 3</a></li>

<li><a href="#">Punkt 4</a></li>
</ul>

</body>
</html>