最简单的WordPress多级CSS下拉菜单

如果你要自制一个WordPress模板，发现多级下拉菜单让你头大，那么这里有一个最简单的制作多级WordPress下拉菜单的方法，完全基于CSS，不需要js脚本。

多级下拉菜单的原理

其实，理解多级下拉菜单的原理，做起来就没那么复杂了。

1.明白菜单的结构， WordPress用wp_nav_menu()函数输出菜单，无非就是多级的无序列表（ul）。

2. 当鼠标滑过菜单项时，使该菜单项的子元素显示出来，这个动作可以只用css表达，也可以借助js的力量。

制作一个多级下拉菜单

1. 先简单了解一下WordPress通过wp_nav_menu()函数输出的菜单的基本结构

顶级菜单项

次级菜单项


第二个顶级菜单项

<div class="menu-header">是包围菜单的div，可有可无，具体的class或者id都是由wp_nav_menu()控制的，它包围的嵌套无序列表ul才是菜单的主体。

从代码中看出，每一个菜单项都是li元素包含a标签构成的，菜单的层级关系由无序列表的嵌套关系反应，如果你熟悉嵌套的无序列表，理解这个结构应该很容易。

2. 如何实现鼠标滑过顶级菜单项时显示次级菜单项

核心技巧就是css的后代选择器，例如

ul li > ul

该选择器选择li元素（顶级菜单项）的子元素中的ul（不包括子元素后代元素中的ul），如下图所示

了解这个原理后，让我们开始吧。

3. 打开你主题的header.php，在适当的位置输出menu

4. 在WordPress默认主题twentyten文件夹下找到style.css文件，在大约371行，将Menu的CSS拷贝到自己的style.css中,如果你使用第二步的代码输出menu，那么到后台创建好menu，刷新前台，就可以看到一个twentyten样式的下拉菜单，这个菜单是支持层级的。

下面的代码已经注释了修改哪些地方可以改变菜单的哪些属性，你可以给菜单的container加一张背景图片，修改二级菜单的背景色或者加背景图片，修改文字颜色等，完全可以做出一个定制化的菜单来。

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;/*修改菜单的背景色（顶级菜单）*/
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;/*包围菜单的div的宽度*/
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a {
	color: #aaa;
	display: block;
	line-height: 38px;
	padding: 0 10px; /*修改顶级菜单项的间距*/
	text-decoration: none;
}
#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none; /*将none改为block，可以强制所有次级菜单显示出来，方便修改样式*/
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;/*修改次级菜单的宽度*/
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #333;/*修改次级菜单的背景色*/
	line-height: 1em;
	padding: 10px;
	width: 160px;/*修改次级菜单的宽度*/
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #333;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff; /*修改所有菜单项的字体颜色*/
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;/*修改所有菜单项的字体颜色,兼容低版本浏览器*/
}