Boerie23
02-28-2009, 08:28 PM
Hi all !
I'm making a suckerfish menu wich works fine .
Now i want to add a third level to my menu but i can't figure out how i could do this.
here is my css :
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
text-align:center;
}
li { /* all list items */
float: left;
position: relative;
width: 114px;
background-image:url(../images/balkje_midden.jpg);
margin-top: 0px;
height: 20px;
border-right: 1px;
border-right-color : #ffffff;
border-right-style: solid;
font-size: 12px;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 22px;
left: 0;
border-right-width:0px;
border-right-color:transparent;
border-right-style:none;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: 0;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
and here is the 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;
Can someone help me out ?
thx in advance !
I'm making a suckerfish menu wich works fine .
Now i want to add a third level to my menu but i can't figure out how i could do this.
here is my css :
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
text-align:center;
}
li { /* all list items */
float: left;
position: relative;
width: 114px;
background-image:url(../images/balkje_midden.jpg);
margin-top: 0px;
height: 20px;
border-right: 1px;
border-right-color : #ffffff;
border-right-style: solid;
font-size: 12px;
}
li ul { /* second-level lists */
display: none;
position: absolute;
top: 22px;
left: 0;
border-right-width:0px;
border-right-color:transparent;
border-right-style:none;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: 0;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
and here is the 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;
Can someone help me out ?
thx in advance !