通常我們網誌分類都會放在側邊欄給大家點選，但是子分類的功能卻鮮少有人使用，因為設定上面比較麻煩而且大部分的人比較沒有這個需求。但是如果真的需要動用到子分類該怎麼辦呢？

像我之前接了一個案子，案主就是希望可以有多個子分類功能，所以當初在搜尋上也花了我一點時間，所以今天要跟各位分享的就是如何將wordpress的分類改成用下拉式選單來呈現。

[!]版權宣告：這篇文章出處來自Anthology of Ideas，內容語法也歸該網站所有。

1.設置分類函數

首先開啟header.php，在適當的位置放置以下語法

2.修改css語法

開啟css文件，將以下語法複製到裡頭。如果對css熟悉的人也可以再進行微調的動作

ul#menu {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
font-size:1.2em;
}

ul#menu li {
float: left;
padding: 0;
margin: 0;
border-right:solid 1px #fff;
}

ul#menu ul li {
float: none;
position: relative;
border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
border-left: 1px solid #FFF;
z-index:1000;
}

ul#menu li ul {
margin: 0;
padding: 0;
display:none;
list-style: none;
position: absolute;
background: #9CC;
}
ul#menu ul ul{
margin-left: .2em;
position: absolute;
top: 0; /* if using borders, -1px to align top borders */
left: 100%;
}

ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}

ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu li a:active{
display: block;
padding: .2em .3em;
text-decoration: none;
background: #5587B3;
color: #FFFFFF;
}

ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
width: 8em;
}

3.新增java script檔案

我已經將js檔案上傳到空間提供大家下載，有需要的人請先下載這個js檔案，將他放到你的模版目錄底下。
然後打開header.php，在裡頭增添一行語法：

4.設置body load

開啟header.php，搜尋以下語法



取代成

最後再把所有有變動過的檔案存檔並且上傳，看看結果如何吧~
如果沒有意外，你應該會順利看到子分類有下拉選單的效果了。

讓分頁也用下拉式選單

同理可證，如果我們想要修改子分頁也是用同樣的步驟做修改。唯一要特別注意是在第一個步驟：

要改成

如果你還想要看看分類有沒有其他有趣的效果，也可以參考我之前寫的另外一篇文章：讓wp分類有樹狀展開的效果 ，他是讓文章可以收合展開，也是另外網誌分類的運用!!!