MattchuB
12-14-2003, 02:58 AM
I want to be able to put sub sub menus into this code but I don't know how. Please help.
<html>
<head>
<title>test menu</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 80px;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block; }
clear: left
</style>
<script type="text/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>
</head>
<body>
<ul id="nav">
<li>top layer 1
<ul>
<li><a href="">1.1</a></li>
<li><a href="">1.2</a></li>
</ul>
</li>
<li>top layer 2
<ul>
<li><a href="">2.1</a></li>
<li><a href="">2.2</a></li>
<li><a href="">2.3</a></li>
</ul>
</li>
<li>top layer 3
<ul>
<li><a href="">3.1</a></li>
<li><a href="">3.2</a></li>
<li><a href="">3.3</a></li>
<li><a href="">3.4</a></li>
<li><a href="">3.5</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<title>test menu</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 80px;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul{ display: block; }
clear: left
</style>
<script type="text/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>
</head>
<body>
<ul id="nav">
<li>top layer 1
<ul>
<li><a href="">1.1</a></li>
<li><a href="">1.2</a></li>
</ul>
</li>
<li>top layer 2
<ul>
<li><a href="">2.1</a></li>
<li><a href="">2.2</a></li>
<li><a href="">2.3</a></li>
</ul>
</li>
<li>top layer 3
<ul>
<li><a href="">3.1</a></li>
<li><a href="">3.2</a></li>
<li><a href="">3.3</a></li>
<li><a href="">3.4</a></li>
<li><a href="">3.5</a></li>
</ul>
</li>
</ul>
</body>
</html>