<head>
<script>
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>
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* width of menu items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* set 1px less than menu width */
top: 0;
display: none;
}
/* styles for menu items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* ie6 bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* fix ie. hide from ie mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* end */
ul li a:hover { color: #e2144a; background: #f9f9f9; } /* hover styles */
li ul li a { padding: 2px 5px; } /* sub menu styles */
li:hover ul, li.over ul { display: block; } /* the magic */
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a>
<ul>
<li><a href="#">history</a></li>
<li><a href="#">team</a></li>
<li><a href="#">offices</a></li>
</ul>
</li>
<li><a href="#">services</a>
<ul>
<li><a href="#">web design</a></li>
<li><a href="#">internet marketing</a></li>
<li><a href="#">hosting</a></li>
<li><a href="#">domain names</a></li>
<li><a href="#">broadband</a></li>
</ul>
</li>
<li><a href="#">contact us</a>
<ul>
<li><a href="#">united kingdom</a></li>
<li><a href="#">france</a></li>
<li><a href="#">usa</a></li>
<li><a href="#">australia</a></li>
</ul>
</li>
</ul>
</body>
