My 2nd attends on CSS and Javascript DOM verticle menu:

Create some codes in html as below:

<div id="nav">
  <ul>
    <li><a href="#" title="Sunfishes">Sunfishes</a>
      <ul>
        <li><a href="#">Shadow bass</a></li>
        <li><a href="#">Ozark bass</a></li>
        <li><a href="#">White crappie</a></li>
      </ul>
    </li>
    <li><a href="#" title="Grunts">Grunts</a>
      <ul>
        <li><a href="#">Smallmouth grunt </a></li>
        <li><a href="#">Burrito</a></li>
        <li><a href="#">Pigfish</a></li>
      </ul>
    </li>
  </ul>
</div>

In <head> tag, place the style code:

<style type="text/css">
<!--
body {
	background-color: #ffffff;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#nav{
	float: left;
	width: 820px;
	height: 45px;
	padding: 0px;
	margin: 0px;
	background-image: url(images/nav_bg.jpg);
	background-repeat: no-repeat;
}

#nav ul {
	margin: 0px;
	padding: 0px;
}

#nav li{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#nav li ul{
	display: none;
}

#nav li.over ul{ display: block; }
#nav li.out ul{ display: none; }

#nav a {
	font-size: 80%;
	color: #003366;
	margin: 0px;
	font-weight: bold;
	padding: 4px 5px 4px 15px;
	background:url(images/nav_bullet.gif) no-repeat 0px 8px;
	font-family: Arial, Helvetica, sans-serif;
}

#nav li ul li:active, #nav li ul li:hover{
	display: block;
}

#nav a:active, #nav a:hover{
	color: #00FF00;
	background:url(images/nav_bullet_over.gif) no-repeat 0px 8px;
}
-->
</style>

And place the javascript code:

<script type="text/JavaScript">
<!--
// Variables
var activeItem = "";
// Load function after the page is loaded
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
		func();
		}
	}
}

// Initial navigation
function initNav() {
	if (!document.getElementById) return false;
	if (!document.getElementsByTagName) return false;	
	navRoot = document.getElementById("nav");
	// Firefox DOM white space fix for firstChild
	navRoot = first_child(navRoot);
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		setNav(node);
	}
}

// Set navigation
function setNav(node) {
	node2 = first_child(node);
	// Set defalut press state
	//node.pressed = false;
	if (node.nodeType == 1 && node.nodeName=="LI") {
		node2.onclick = function() {
			if(!this.pressed){
				this.pressed = true;
				setNavVisible(this, "over");
			}else{
				this.pressed = false;
				setNavVisible(this, "out");
			}
		}
		node2.onkeypress = node2.onclick;
	}
	if(!node2)return false;
	// Check if it is active
	if (node2.getAttribute("title") == getNavActive()) {
		node2.pressed = true;
		setNavVisible(node2, "over");
		setNavStyle(node2);
		return false;
	}else{
		// Defalut hide sub-menu items
		setNavVisible(node2, "out");
		setNavStyle(node2);
	}
}

// Set active visible
function setNavVisible(node, myClass) {
	node.parentNode.className = myClass;
}

// Set menu style 
function setNavStyle(node) {
	node.parentNode.style.padding = "10px 0px 0px 30px";

}

// Set active menu
function setNavActive(title) {
	activeItem = title;
}
// Get active  menu
function getNavActive() {
	return activeItem;
}

// Call function
addLoadEvent(initNav);

// Firefox fix

function is_all_ws( nod )
{
  // Use ECMA-262 Edition 3 String and RegExp features
  return !(/[^\t\n\r ]/.test(nod.data));
}

function is_ignorable( nod )
{
  return ( nod.nodeType == 8 ) || // A comment node
         ( (nod.nodeType == 3 ) && is_all_ws(nod) ); // a text node, all ws
}

function node_before( sib )
{
  while ((sib = sib.previousSibling)) {
    if (!is_ignorable(sib)) return sib;
  }
  return null;
}

function node_after( sib )
{
  while ((sib = sib.nextSibling)) {
    if (!is_ignorable(sib)) return sib;
  }
  return null;
}

function last_child( par )
{
  var res=par.lastChild;
  while (res) {
    if (!is_ignorable(res)) return res;
    res = res.previousSibling;
  }
  return null;
}

function first_child( par )
{
  var res=par.firstChild;
  while (res) {
    if (!is_ignorable(res)) return res;
    res = res.nextSibling;
  }
  return null;
}

function data_of( txt )
{
  var data = txt.data;
  // Use ECMA-262 Edition 3 String and RegExp features
  data = data.replace(/[\t\n\r ]+/g, " ");
  if (data.charAt(0) == " ")
    data = data.substring(1, data.length);
  if (data.charAt(data.length - 1) == " ")
    data = data.substring(0, data.length - 1);
  return data;
}

//-->
</script>