I'm trying to get a drop down menu working - See here. The drop down is fine, but it does't change background colour like its supposed to when the mouse hovers over the list items. I got the orginal script here . I've been mulling it over for hours and I'm out of ideas. Can anyone see where I'm going wrong please?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;

//--><!]]></script>
</head>
<body>
<div id="containnav">
<ul id="cssdropdown">

    <li class="mainitems"><a href="index.php" title="Visit our Homepage" ><span>home</span></a>
       <li class="mainitems"><a href="about.php" title="About Us" ><span>about us</span></a><ul class="subuls">
<li><a href="">History</a></li>
<li><a href="">Ethos</a></li>
<li><a href="">Facts and figures</a></li>
<li><a href="">The future</a></li>
<li><a href="">The team</a></li>
<li><a href="">Recruitment</a></li>
<li><a href="">Contact us</a></li>
</ul>
</li>

       <li class="mainitems"><a href="tenants.php" title="Tenants" ><span>tenants</span></a><ul class="subuls">
<li><a href="">Property search</a></li>
<li><a href="">How to apply</a></li>
<li><a href="">Arrange viewing</a></li>
<li><a href="">Pay deposit / Holding deposit </a></li>
<li><a href="">Complete application form</a></li>
<li><a href="">Pay application fee</a></li>
<li><a href="">Arrange insurance</a></li>
<li><a href="">Move in</a></li>
<li><a href="">Tenant Handbook</a></li>
<li><a href="">Maintenance</a></li>
<li><a href="">Online administration</a></li>
<li><a href="">Privacy and security policy</a></li>
<li><a href="">Matching service</a></li>
<li><a href="">Enquiry form</a></li>
<li><a href="">Feedback form</a></li>
<li><a href="">FAQ section</a></li>
</ul>
</li>
       <li class="mainitems"><a href="landlords.php" title="Landlords" ><span>landlords</span></a><ul class="subuls">
<li><a href="">Introduction</a></li>
<li><a href="">Packages available</a></li>
<li><a href="">Guide to becoming a Landlord</a></li>
<li><a href="">Request Landlord pack</a></li>
<li><a href="">Arrange complimentary consultation</a></li>
<li><a href="">Complete and return forms to Click-let</a></li>
<li><a href="">Arrange for agent to take photos / collect keys</a></li>
<li><a href="">What happens next?</a></li>
<li><a href="">Legislation</a></li>
<li><a href="">HMO Licensing</a></li>
<li><a href="">Insurance</a></li>
<li><a href="">Privacy and security policy</a></li>
<li><a href="">Enquiry form</a></li>
<li><a href="">Feedback form</a></li>
<li><a href="">FAQ section</a></li>
</ul>
</li>
  
 <li class="mainitems"><a href="registeredlandlords.php" title="Registered Landlords" ><span>registered landlords</span></a><ul class="subuls">
<li><a href="">Property status</a></li>
<li><a href="">Access account</a></li>
<li><a href="">Newsletter</a></li>
<li><a href="">Market comment</a></li>
<li><a href="">Enquiry form</a></li>
<li><a href="">Feedback form</a></li>
</ul>
</li>

       <li class="mainitems"><a href="buytolet.php" title="Buy to Let" ><span>buy to let</span></a><ul class="subuls">
<li><a href="">Introduction</a></li>
<li><a href="">Why invest in property?</a></li>
<li><a href="">Our service</a></li>
<li><a href="">Arrange a consultation</a></li>
<li><a href="">Do&#195;&#162;&#194;?&#194;?s and Don&#195;&#162;&#194;?&#194;?ts</a></li>
<li><a href="">Market Comment</a></li>
<li><a href="">Enquiry form</a></li>
<li><a href="">Feedback form</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Register</a></li>
<li><a href="">Members area</a></li>
</ul>
</li>

       <li class="mainitems"><a href="otherinfo.php" title="Other information"><span>other information</span></a><ul class="subuls">
<li><a href="">Insurance</a></li>
<li><a href="">Relocation</a></li>
<li><a href="">Edinburgh</a></li>
<li><a href="">Fife</a></li>
<li><a href="">Useful links</a></li>
</ul>
</li>
</ul>
</div></div>
<div id="restofcontent">
<!-- End of Primary Page Navigation -->
</div>
</body>
</html>
Code:
/* Navigation */

#containnav {
position:absolute;
top:85px;
left:16px;
font: 100&#37; verdana, arial, helvetica, sans-serif; 
display: block; 
line-height:15px;
}

#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}

#cssdropdown li {
float: left;
position: relative;
z-index: 1000; 
background-image:url(images/navcolour.gif);
}

#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
background-image:url(images/navcolourhover.gif);
z-index: 1200;
width:200px;
height:15px;
}

.mainitems{
border: 1px solid #FFF;
background-image:url(images/navcolour.gif);
padding-left:15px;
padding-right:15px;
height:22px;
text-align:center;
z-index: 900; 
}

.mainitemsselected{
border: 1px solid #FFF;
background-image:url(images/navcolourhover.gif);
padding-left:15px;
padding-right:15px;
height:22px;
text-align:center;
}

.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}

.subuls{
display: none;
width:200px;
padding-left:15px;
padding-right:15px;
position: absolute;
top: 22px;
left: 0;
border: 1px solid #FFF;
text-align:left;
z-index: 1100;
}

.subuls li{
width: 100%;
}

.subuls li a{
text-decoration: none;
}

#cssdropdown 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: auto;
margin-top:7px;
}

#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}