现在很多人从网上下载了一些不错的wordpress主题，安装后却发现了不少的问题。这倒不是说主题不好，而是不同人的不同需要，有的时候一个再优秀的wordpress主题是无法满足所有人的需要的。
比如你准备做一个很大型的网站 ，你的文章分类就会有很多了，每个分类下面还有五六个子分类，在导航栏就会无法全部放下，当然也完全也没有这个必要。
解决这个问题比较的方法就是wordpress博客实现子分类用下拉菜单显示，当你的鼠标移到导航栏的时候，就会出现下来菜单，显示的是该分类的子分类。今天免费资源部落就为大家介绍一个。
手动修改wordpress博客代码来实现导航栏下拉菜单显示的方法。
首先声明这个方法比较地“土”，使用这个方法你不需要去懂得wordpress复杂的函数调用，只需要要懂得基本的html知识就可以使用了，适合新手来使用。
1、Wordpress 输出分类导航链接的函数是：<?php wp_list_categories('orderby=id&hide_empty=0&title_li='); ?>，输入的页面形式就会如下演示这样了：
<li><a href="https://www.uhua0318.com/seo/">网站优化</a></li>
<li><a href="https://www.uhua0318.com/hengshuiseo/">衡水网站优化</a></li>
<li><a href="https://www.uhua0318.com/zuowangzhan/">网站建设</a></li>
<li><a href="https://www.uhua0318.com/theme/">免费模板</a></li>
2、而我们要实现的页面显示样式如下：
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a<a href="https://www.uhua0318.com/seo/">网站优化</a><ul>
<li><a href="https://www.uhua0318.com/hengshuiseo/">衡水网站优化</a></li>
<li><a href="https://www.uhua0318.com/zuowangzhan/">网站建设</a></li>
<li><a href="https://www.uhua0318.com/theme/">免费模板</a></li>
</ul>
</li>
3、所以我们采用的方法就是在wordpress调用header()函数时候，先调用实现下拉菜单的javascript代码，然后直接输出导航栏的分类栏目。
首先你需要在你的header（）文件中插入以下javascript代码：
<script type="text/javascript">
sfHover = function()
{ var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++)
{ sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function()
{ this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } }
if (window.attachEvent) window.attachEvent("onload", sfHover); </script>
这段代码的功能就是实现鼠标移动到导航栏中的分类目录时立即弹出下拉菜单选项。
4、修改输出分类导航链接的函数。例如：你可以改成下面的演示：
<?php wp_list_categories('orderby=id&depth=2&hide_empty=0&title_li='); ?>
请注意这里“depth=2”参数的作用就是用于控制输出导航栏的下拉菜单，2代表着输出你分类中一层子分类，如果你把它改成3，则表示输出你的两层子分类，大家可以依次来推。
5、将head()函数修改完毕后，剩下的工作就是修改css样式了。下面的css代码是用来控制子菜单的隐藏和显示的，这个你是一定要加上去的，否则就显示不出来效果了。
#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto;
其他的css样式你可以参考你的wordpress主题来进行相应的颜色、间距等改变。
方法二：
1、下拉菜单代码部分
<?php wp_nav_menu('menu=主导航&theme_location=mainmenu&depth=0&container=&container_class=&menu_id=menu-main&menu_class=top-menu'); ?>
这个代码可以放到header.php里面，你也可以为他加一个div容器用来设置位置。
2、javascript部分
新建一个js文件或者主题原有的js文件中填写以下代码作为jquery库，显示时间我按照原来的主题添加为200，但是实际测试时候有点慢，还有残留不能快速弹回，我强烈建议各位括号里填0，因为我就是这样成功了。
$(document).ready(function(){
$('ul.top-menu li').hover(function(){
$(this).find('ul:first').slideDown(200);//显示二级菜单，括号中的数字表示下拉菜单完全显示出来需要200毫秒。
$(this).addClass("hover");
},function(){
$(this).find('ul').css('display','none');
$(this).removeClass("hover");
});
function hide_submenu(){
$('ul.top-menu li').find('ul').css('display','none');
}
$('ul.top-menu li li:has(ul)').find("a:first").append(" » ");
document.onclick = hide_submenu;
});
这一部分就是所谓的jquery，你实现要加载jquery库。加载方法如下：
引入:<script type="text/javascript" src="这个部分填写你的jquery库文件地址，也就是一个JS文件的地址，你可以用主题原有的js文件，也可以自己新建一个js文件"></script>
将以上代码放到header.php的<head>…</head>之间，用来加载js
3、CSS部分
.menunav ul,.menunav li{
list-style:none;
}
ul.top-menu{
position:relative;
}
ul.top-menu li{
float:left;
}
ul.top-menu li.hover,
ul.top-menu li:hover{
position: relative;
}
ul.top-menu li a{
width:80px;
height:35px;
display:block;
margin:0;
text-align:center;
color:#ffffff;
text-decoration:none;
font: 14px Verdana;
line-height: 35px;
}
ul.top-menu li a:hover,
ul.top-menu li.hover a{
background:#F69;
}
ul.sub-menu{
display:none;
position:absolute;
}
ul.sub-menu li{
width:100%;
clear:both
}
ul.sub-menu li a{
width: 150px;
height:35px;
margin:0;
text-align:left;
text-indent:12px;
font: 14px/35px Verdana;
}
ul.sub-menu li a:hover,
ul.sub-menu li.hover a{
background:#F7437F;
}
ul.sub-menu ul{
rightright:100%;
top:0;
}
ul.sub-menu ul a:hover{
background:#F7437F;
}
以上代码添加到你的style.css中作为样式，我这个样式一定不适合你，但是给了你一个模板，你可以自行修改，尤其是颜色。如果出现错位情况你可以用谷歌浏览器的强大审查元素的功能进行一个个调试。
写完了，这个功能耽误了我整整一个下午加中午不吃饭的时间，我现在还没吃中午饭，但是要去吃晚饭了。
希望给你一点启发，网上也有类似代码，你可以对照有什么不同，但是请按照我的建议进行设置，因为我都是千百次实践得出来的经验。
1F