眾所周知，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 代碼，相信聰明的你肯定可以寫出來。