众所周知，WordPress3.0 中增加了一个非常实用方便的自定义菜单功能，这个功能可以使我们轻松的制作出多级下拉菜单，今天，笔者就通过一个简单的二级下拉菜单的示例来告诉各位童鞋具体怎么操作。
Step 1 — 在 functions.php 中添加以下代码，使我们的主题支持自定义菜单功能。
add_theme_support（『nav-menus』）;
Step 2 — 添加一个顶部菜单。
if（function_exists（『register_nav_menus』））{
register_nav_menus（
array（
『header_menu』 => 『Header Navigation』
）
）;
}
Step 3 — 把 wp_nav_menu() 函数放到一个自定义函数当中.
function wper_so_menu（）{
if（function_exists（『wp_nav_menu』）&& has_nav_menu（『header_menu』））：
wp_nav_menu（
array（
『menu』 => 『Header Navigation』,
『container』 => 『div』,
『container_class』 => 『warp』,
『container_id』 => 『』,
『menu_class』 => 『ddsmoothmenu』,
『menu_id』 => 『nav』,
『echo』 => true,
『fallback_cb』 => 『fallback_no_menu』,
『before』 => 『』,
『after』 => 『』,
『link_before』 => 『』,
『link_after』 => 『』,
『depth』 => 2,
『walker』 => new Walker_Nav_Menu（）,
『theme_location』 => 『』,
『show_home』 => true
）
）;
endif;
}
这里我解释一下 wp_nav_menu() 函数的各个参数。这个函数的功能就是显示一个自定义导航菜单 (官方文档)：
menu： 我们创建的菜单名称。本例中我们使用 「Header Navigation」
container： 我们创建的菜单所在容器的名称。如果设置为 「div」，则输出结果为<div>.....</div>，本例中我们使用 「div」 。
container_class： 上面的容器的 class 属性。如果设置为 nav，则输出结果为<div class=「nav」>.....</div>，本例中我们使用 「warp」
container_id： 上面的容器的 id 属性。如果设置为 menu，则输出结果为<div id=「menu」>.....</div>
menu_class：无序列表 ul 的 class 属性。本例中我们设置为 「ddsmoothmenu」，则输入结果为<ul class=「ddsmoothmenu」>.....</ul>
menu_id：无序列表 ul 的 id 属。如果设置为 「menu-item」，则输出结果为<ul id=「menu-item」>.....</ul> 本例中我们使用 「nav」
echo： 是否显示菜单。如果设置为 false，则不显示菜单。
fallback_cb： 菜单无法显示时的提示信息。比如：菜单未找到。
before， after：包含<a&> 标签容器的名称，如果设置为：<span> 和</span> 则输出结果为：<span><a>.....</a></span>
link_before， link_ after： 包含链接文字的标签名称，如果设置为：<em> 和</em> 则输出结果为：<a><em> 链接文字</em></a>
depth：下拉菜单的深度，本例中我们设置为：2，则只支持两级下拉菜单。默认为 0，即无限级下拉菜单。
walker： 自定义的遍历对象，调用一个对象定义显示导航菜单。默认为 ：new Walker_Nav_Menu（）
theme_location：后台菜单页面中包含菜单名称的容器的 ID.
show_home：布尔型值，是否显示首页。
Step 4 — 在 header.php 中的适当位置调用我们的自定义函数.
Step 5 — 现在我们的主题已经支持一个自定义菜单了，接下来利用 jQuery 实现下来菜单的动画效果。加载 jQuery 库是必须地！
所用到的 jQuery 代码：
（function（$）{
$（function（）{
$（document）.ready（function（）{
$（『#nav li』）.hover（
function（）{
//显示二级菜单，括号中的数字表示下拉菜单完全显示出来需要 200 毫秒。
$（『ul』， this）.slideDown（200）;
},
function（）{
//隐藏二级菜单
$（『ul』, this）.slideUp（150）;
}
）;
）;
}）;
}）（jQuery）;
最后，我们得到如下 HTML 代码：
<div class=「warp」>
<ul id=「nav」 class=「ddsmoothmenu」>
<li id=「menu-item-6」 class=「menu-item .... menu-item-6」>
<a href=「http://localhost/？page_id=2」>
<span><em> 示例页面 2</em></span>
</a>
<！-- 二级下拉菜单 -->
<ul class=「sub-menu」>
<li id=「menu-item-36」 class=「menu-item .... menu-item-36」>
<a href=「http://localhost/？page_id=3」>
<span><em> 实例页面 3</em></span>
</a>
</li>
<li id=「menu-item-54」 class=「menu-item .... menu-item-54」>
<a href=「http://localhost/？cat=1」>
<span><em> 文章分类 1</em></span>
</a>
</li>
<li id=「menu-item-55」 class=「menu-item .... menu-item-55」>
<a href=「http://localhost/？page_id=4」>
<span><em> 示例页面 4</em></span>
</a>
</li>
<li id=「menu-item-56」 class=「menu-item ..... menu-item-56」>
<a href=「http://localhost/？page_id=5」>
<span><em> 示例页面 5</em></span>
</a>
</li>
</ul>
<！-- 二级下拉菜单结束 -->
</li>
</ul>
</div>
这样，我们的下拉菜单就制作完成了，只要适当的美化一下即可，至于 CSS 代码，相信聪明的你肯定可以写出来。