Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TEST CSS VERTICAL NAVIGATIONt</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" 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>
<style type="text/css">
ul { padding: 0; margin: 0; list-style: none;}
li {position: relative;width: 160px;}
li a {color: #FFFFFF;text-decoration: none;background-color: #939E7E;display: block;text-indent: 15px;
font: normal 12px/20px verdana;border-top: 1px solid #FFFFFF;width: 160px;}
li a:hover {color: #284100;background-color: #D6DACD;display: block; width: 160px;}
ul li ul { display: none; position: absolute; top: 0; left: 0;margin-left: 160px;}
li > ul {top: 0;left: 0;}
li:hover ul, li.over ul { display: block; }
li#last {width: 160px;margin-right: 0px;}
li#last a {width: 160px;}
#left {position: relative;top: 100px;left: 100px;}
</style>
</head>
<body>
<div id="left">
<ul id="nav">
<li><a href="#">Main menu</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
<li><a href="#">Next menu</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</ul>
</div>
</body>
</html>
ul { padding: 1; margin: 1; list-style: none;}
made it work for me - but moved it in and down 2px of course.
<edit>In fact the margin can still be 0 put the padding needs at least 1 for it to work.</edit>
Use a full doctype [w3.org] to make IE6 render in standards compliant mode.
