Horizontal Dropdown Menu Problem

[hybrid kill3r]

So I got a tutorial on how to make a horizontal dropdown list menu with javascript and css. My problem is that I want to use my own css class names and such to go with my template, but it doesn't seem to be working. The entire menu itself doesn't appear until you mouseover it and then it disappears on onmouseout. Other than that, everything else works perfectly.The original script can be found here:http://www.javascriptkit.com/script/script2/csstopmenu.shtmlMy CSS:

#navigation ul{	background: url(images/background_navbar.jpg) repeat-x;	color: #000;	height: 33px;	margin: 0;padding: 0;list-style-type: none;}/*Top level list items*/#navigation ul li{position: relative;display: inline;float: left;}/*Top level menu link items style*/#navigation ul li a{display: block;width: 120px; /*Width of top level menu link items*/padding: 2px 8px;border: 1px solid #202020;border-left-width: 0;text-decoration: none;background: url(menubg.gif) center center repeat-x;color: black;font: bold 13px Tahoma;}	/*Sub level menu*/#navigation ul li ul{left: 0;top: 0;border-top: 1px solid #202020;position: absolute;display: block;visibility: hidden;z-index: 100;}/*Sub level menu list items*/#navigation ul li ul li{display: inline;float: none;}/* Sub level menu links style */#navigation ul li ul li a{width: 160px; /*width of sub menu levels*/font-weight: normal;padding: 2px 5px;background: #e3f1bd;border-width: 0 1px 1px 1px;}#navigation ul li a:hover{background: url(menubgover.gif) center center repeat-x;}#navigation ul li ul li a:hover{background: #cde686;}#navigation .arrowdiv{position: absolute;right: 0;background: transparent url(menuarrow.gif) no-repeat center left;}

My java script:

var cssmenuids=["navigation"] //Enter id(s) of CSS Horizontal UL menus, separated by commasvar csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.function createcssmenu2(){for (var i=0; i<cssmenuids.length; i++){  var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")	for (var t=0; t<ultags.length; t++){			ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"		var spanref=document.createElement("span")			spanref.className="arrowdiv"			spanref.innerHTML="    "			ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)		ultags[t].parentNode.onmouseover=function(){					this.style.zIndex=100		this.getElementsByTagName("ul")[0].style.visibility="visible"					this.getElementsByTagName("ul")[0].style.zIndex=0		}		ultags[t].parentNode.onmouseout=function(){					this.style.zIndex=0					this.getElementsByTagName("ul")[0].style.visibility="hidden"					this.getElementsByTagName("ul")[0].style.zIndex=100		}	}  }}if (window.addEventListener)window.addEventListener("load", createcssmenu2, false)else if (window.attachEvent)window.attachEvent("onload", createcssmenu2)

My source code for the menu:

	<div id='navigation'>			<ul>			<li><a href="http://localhost/teachertools/index.php/home">Home</a></li><li><a href="http://localhost/teachertools/index.php/#">Forum</a></li><li><a href="http://localhost/teachertools/index.php/support">Support</a></li><li><a href="http://localhost/teachertools/index.php/resources">Resources</a></li><li><a href="http://localhost/teachertools/index.php/tools">Tools</a></li><li><a href="http://localhost/teachertools/index.php/#">Login</a><ul><li><a href="http://localhost/teachertools/index.php/members/login">Login</a></li><li><a href="http://localhost/teachertools/index.php/members/recover">Recover Pass</a></li></ul></li><li><a href="http://localhost/teachertools/index.php/#">Register</a><ul><li><a href="http://localhost/teachertools/index.php/members/register">Create Account</a></li><li><a href="http://localhost/teachertools/index.php/members/activate">Acivate Account</a></li></ul></li><li><a href="http://localhost/teachertools/index.php/contact">Contact</a></li>		</ul>