I'm trying to design a collapsible menu that responds to clicks, not mouseovers. Below is my javascript:

Code:
var dropList = function() {
	if(document.getElementById) {
		theList = document.getElementById("leftnav");
		for (i = 0; i < theList.childNodes.length; i++) {
			node = theList.childNodes[i];
			if (node.nodeName == "li") {
				if(node.className == "") {
					node.onclick = function() {
						node.className+="active";
					}
				} else {
					node.onclick = function() {
						node.className = this.className.replace("active","");
					}
				}
			}
		}
	}
}
window.onload = dropList;
The XHTML:

HTML Code:
<div id="nav">
				<ul id="leftnav" class="left">
					<li><a href=" ">Home</a></li>
					<li><a href=" ">Training</a>
						<ul>
							<li><a href=" ">Sub-page 1</a></li>

							<li><a href=" ">Sub-page 2</a></li>
							<li><a href=" ">Sub-page 3</a></li>
							<li><a href=" ">Sub-page 4</a></li>
							<li><a href=" ">Sub-page 5</a></li>
						</ul>
					</li>
					<li><a href=" ">Resources</a></li>

					<li><a href=" ">Products</a></li>
					<li><a href=" ">Alliances</a></li>
					<li><a href=" ">Support</a></li>
				</ul>
			</div>
And CSS:

Code:
#nav {
	position: absolute;
	width: 175px;
	height: 300px;
	background-color: #00D0E9
}

ul.left {
	list-style: none;
	margin-left: 0px;
	padding-left: 10px;
}

ul.left a {
	font-weight: normal;
}

ul.left li ul {
	list-style: none;
	padding-left: 20px;
	display: none;
}

ul.left, ul.left li.active ul {
	display: block;
}
Clicking "Training" does nothing...why doesn't this work?