WordPress 多级导航菜单

<div id="menubar">
	<ul class="menus">
		<li class="..."><a href="http://.../">Home</a></li>
		<li class="...">
			<a href="http://.../">菜单1</a>
			<ul class="children">
				<li class="..."><a href="http://.../">菜单11</a></li>
				<li class="...">
					<a href="http://.../">菜单12</a>
					<ul class="children">
						<li class="..."><a href="http://.../">菜单121</a></li>
						<li class="..."><a href="http://.../">菜单122</a></li>
						<li class="..."><a href="http://.../">菜单123</a></li>
						<li class="..."><a href="http://.../">菜单124</a></li>
					</ul>
				</li>
				<li class="...">
					<a href="http://.../">菜单13</a>
					<ul class="children">
						<li class="..."><a href="http://.../">菜单131</a></li>
						<li class="..."><a href="http://.../">菜单132</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="...">
			<a href="http://.../">菜单2</a>
			<ul class="children">
				<li class="..."><a href="http://.../">菜单21</a></li>
			</ul>
		</li>
		<li class="...">
			<a href="http://.../">菜单3</a>
			<ul class="children">
				<li class="..."><a href="http://.../">菜单31</a></li>
				<li class="...">
					<a href="http://.../">菜单32</a>
					<ul class="children">
						<li class="..."><a href="http://.../">菜单321</a></li>
						<li class="..."><a href="http://.../">菜单322</a></li>
					</ul>
				</li>
			</ul>
		</li>
		...
	</ul>
</div>

<?php wp_list_pages('depth=2&title_li=0&sort_column=menu_order'); ?>

/* 子菜单的菜单项 */
#menubar ul.children li {
	float:none; /* 垂直排列 */
	margin:0;
	padding:0;
	/* multi 2009/06/11 ADD START */
	display:inline; /* 对 IE 来说十分很重要 */
	/* multi 2009/06/11 ADD END */
}

#menubar ul.children li a.subtitle {
	border-right:3px solid #4281B7;
	width:97px;
}

#menubar ul.menus li a:hover, 
/* multi 2009/06/11 ADD START */
#menubar ul.menus li a.current {
/* multi 2009/06/11 ADD END */
	background:#4281B7; /* 背景颜色 */
}

// 找到所有的菜单
var menus = this.obj.getElementsByTagName('ul');
for (var i = 0; i < menus.length; i++) {
	// 找到菜单的父节点 (包括标题链接部分)
	var menu = menus[i].parentNode;
 
	// 如果菜单的父节点就是根菜单, 显示一般的菜单
	if(menu.parentNode === this.obj) {
		new Menu(menu, opacity);
 
	// 如果菜单的父节点不是根菜单, 说明当前菜单是子菜单
	} else {
		new Menu(menu, opacity, 1);
		// 在子菜单的标题链接上加上 class 名, 以便定义样式
		menu.firstChild.className += ' subtitle';
	}
}

initialize: function(target, opacity, sub) {
	this.util = new MenuUtil();
 
	// 获取目标菜单 (没多余元素)
	this.obj = this.util.cleanWhitespace(target);
 
	// 定义透明度, 默认透明
	this.opacity = opacity || 1;
 
	/* multi 2009/06/11 ADD START */
	// 是否为子菜单
	this.sub = sub || -1;
	/* multi 2009/06/11 ADD START */
 
	// 获取菜单
	this.menu = this.obj.childNodes
 
	// 重要! 如果菜单不包含菜单项, 则不进行处理
	if (this.menu.length < 2) { return; }
 
	// 菜单标题和菜单体
	this.title = this.menu[0];
	this.body = this.menu[1];
 
	// 定义初始样式
	this.util.setStyle(this.body, 'visibility', 'hidden');
	this.util.setStyle(this.body, 'position', 'absolute');
	/* multi 2009/06/11 DELETE START */
	//this.util.setStyle(this.body, 'overflow', 'hidden');
	/* multi 2009/06/11 DELETE END */
	this.util.setStyle(this.body, 'display', 'block');
 
	// 添加监听器
	this.addListener(this.obj, 'mouseover', this.util.bind(this, this.activate), false);
	this.addListener(this.obj, 'mouseout', this.util.bind(this, this.deactivate), false);
	}

// 获取当前菜单体的位置 (子菜单)
if(this.sub == 1) {
	var pos = this.util.currentOffset(this.title);
	var left = this.util.getWidth(this.body);
	var top = pos[1];
 
// 获取当前菜单体的位置 (菜单)
} else {
	var pos = this.util.cumulativeOffset(this.title);
	var left = pos[0];
	var top = pos[1] + this.util.getHeight(this.title);
	// 子菜单不需要设置不透明度, 否则会形成多重透明, 效果不好.
	this.util.setStyle(this.body, 'opacity', this.opacity);
}

// 当前选中菜单加上 class 名为, 以便定义样式
this.title.className += ' current';

// 离开菜单时取消当前菜单上的 class 名, 恢复原本的样式
this.title.className = this.title.className.replace('current', '');