var menu = document.getElementById("myMenu") //Get menu div

menu.className="myMenu"+0 //Set class to the top level
loopElements(menu,0) //Call the function

function loopElements(el,level){
	for(var i=0;i<el.childNodes.length;i++){
		//We only want LI nodes:
		if(el.childNodes[i] && el.childNodes[i]["tagName"] && el.childNodes[i].tagName.toLowerCase() == "li"){
			//Ok we have the LI node - let's give it a className
			el.childNodes[i].className = "myMenu"+level
			//Let's look for the A and if it has child elements (another ol tag)
			childs = el.childNodes[i].childNodes
			for(var j=0;j<childs.length;j++){
				temp = childs[j]
				if(temp && temp["tagName"]){
					if(temp.tagName.toLowerCase() == "a"){
						//We found the A tag - set class
						temp.className = "myMenu"+level
						temp.onclick= showhide;
						temp.onmouseover = changeColour;
						temp.onmouseout = resetColour;
					}else if(temp.tagName.toLowerCase() == "ul"){
						temp.style.display = "none"
						//Set class
						temp.className= "myMenu"+level
						//Recursive - calling it self with the new found element
						//to go all the way through the three.
						loopElements(temp,level +1) 
					}
				}
			}	
		}
	}
}

function showhide(){
	//we have the a tag now we need to go to the LI tag to check for ol tags
	el = this.parentNode
	//loop for ol tags
	for (var i=0;i<el.childNodes.length;i++){
		temp = el.childNodes[i]
		if (temp && temp["tagName"] && temp.tagName.toLowerCase()=="ul"){
			//check status
			if (temp.style.display=="none"){
				temp.style.display=""
			} else {
				temp.style.display="none"
			}
		}
	}
	return false
}
function changeColour(){
	el = this;
	el.style.backgroundColor="#862D59";
	el.style.color="#66CCCC";
}
function resetColour(){
	el = this;
	el.style.backgroundColor="#66cc99";
	el.style.color="#862D59";
}