本文为WordPress使用技巧40则系列，响应Jiang老大的号召翻译。本人既没技术也无文采，如有错误恳请指正。
一位读者前不久问我如何为wordpress创建水平下拉菜单，我给出的答案是结合CSS与Javascript很容易就可以办到。
第一步，让wordpress以分级列表的形式显示菜单。
< ?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>.
代码如下，于是我们可以为它定义样式
<div style="text-align:center;">
<ul id="menu" style="padding:0; margin:0;"><!--p wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0');--></ul>
</div>.
我把这段代码加入到了我的header.php文件中，你也可以把它放到任何一个想要显示的位置。
CSS非常简单，你只需要把以下代码加入到当前主题的style.css中去。
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;
}.
当然，你可以修改颜色和文字大小来保证和你的主题的一致性。
最后一步是使下拉菜单在所有浏览器中生效。Firefox中使用简单的CSS声明就能完成，但Internet Explorer不能解析: hover伪类。所以我们在Javascript中模拟它。
<script type="text/javascript"><!--mce:0--></script>
.
以上的代码有几点注意事项：
1. 把你的主题中的标签改成以使这段代码生效。
2. 代码不是我写的，但我已经使用了很长一段时间并且记不得从哪里找到它的了。
3. 代码偶尔会产生Javascript错误，为此我一直很想重写一遍，但通常情况下能正常工作。
转自:http://nightless.cn/?p=61
