JavaScript - Onclick Menu

<div id="menu">
  <ul class="menu">
	  <li><a href="#" class="parent"><span>Home</span></a>
	<li><a href="#"><span>Cities</span></a>
				<div><ul>
					<li><a href="#"><span>Pune</span></a></li>
					<li><a href="#"><span>Mumbai</span></a></li>
					<li><a href="#"><span>Delhi</span></a></li>
					<li><a href="#"><span>Madras</span></a></li>
				</ul></div>
	</li>
			<li><a href="#"><span>Login</span></a></li>
            <li><a href="#"><span>About Us</span></a></li>
			<li class="last"><a href="#"><span>Contact Us</span></a></li>
  </ul>
</div>

<script type="text/javascript"><!--//--><![CDATA[//><!--
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>

<div id="menuPadding">
	<div id="menu">
<ul id="nav">
<li id="m1"><a href="">HOME</a></li>
<li id="m2">ABOUT US 					       
<ul>
<li><a href="">Our Values</a></li>
<li><a href="">Facilities</a></li>
<li><a href="">Arena</a></li>
<li><a href="">Jobs</a></li>
</ul>
</li>
<li id="m3">SUCCESS 					       
<ul>
<li><a href="">Jobs</a></li>
<li><a href="">Results</a></li>
<li><a href="">Awards</a></li>
<li><a href="">Testimonials</a></li>
</ul>
</li>
</div>
</div>

#menu {
	margin-top: 16px;
	width: 879px;
	height: 30px;
	z-index: 1000;
	font-family: Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
}

#menuPadding {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	text-align:center;
	z-index: 1000;
}

#menuPadding ul {
	height: 29px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
z-index: 1000;
}

#menuPadding ul li {
/*	display: inline;*/
	line-height: 29px;
	padding:0px;
	margin-left:1px;
	display:block;
	float:left;
	font-weight:bold;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a {
	text-align:center;
z-index: 1000;
}

#menuPadding ul li li {
	padding:0px;
	margin:0px;
z-index: 1000;
}

#menuPadding ul li li a {
	text-align:left;
	padding-left:14px;
	text-transform:uppercase;
z-index: 1000;
	font-size:90%;
}

#menuPadding ul li li a.notupper {
	text-transform:none;
z-index: 1000;
}

/* coloured menus */
#menuPadding ul li#m1 {
	background:#FF0000;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m1 li {
	background:#FF0000;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m2 {
	background:#0099CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m2 li {
	background:#0099CC;
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m2 li a {
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m3 {
	background:#999999;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m3 li {
	background:#999999;
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m3 li a {
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m4 {
	background:#9966CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m4 li {
	background:#9966CC;
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m4 li a {
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m5 {
	background:#AAC619;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m5 li {
	background:#AAC619;
	width:230px;
	padding-right:20px;
z-index: 1000;
}

#menuPadding ul li#m5 li a {
	width:230px;
z-index: 1000;
}

#menuPadding ul li#m6 {
	background:#FF9900;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m6 li {
	background:#FF9900;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m7 {
	background:#FF0099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m7 li {
	background:#FF0099;
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li a {
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li li {
	font-size:87%;
z-index: 1000;
}

#menu li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 216px;
z-index: 1000;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
z-index: 1000;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
z-index: 1000;
}

#menuPadding ul li#m8 {
	background:#660099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m8 li {
	background:#660099;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m9 {
	background:#A80017;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m9 li {
	background:#A80017;
	width:146px;
z-index: 1000;
}

#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a:hover {
	color:#000;
z-index: 1000;
}

/* suckerfish */
#menu, #menu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;color:#fff;
}

#menu a {
	display: block;
	width: 96px;
}

#menu li { /* all list items */
	float: left;
	width: 96px; /* width needed or else Opera goes nuts */
	border-top:1px solid #fff;
}

#menu li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 106px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	font-size:90%;
}

#menu li ul ul { /* third-and-above-level lists */
/*	margin: -1em 0 0 96px;*/
	font-size:110%;	
}

#menu li li { 
	font-size:100%;
	color:#fff;
}


#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}