TOPMING主题默认的二级分类层次方式显示的效果不好看，因为部落格没设二级分类所以没有去深究。分类少慢慢发现文章多了之后浏览起来不方便，文章都混到一起去了。WP侧栏的分类目录默认二级栏目有一个class=“children”，便准备使用jQuery不修改模板文件，实现弹出式显示二级菜单。其中SubMenu()方法可以作为弹出二级菜单供其他元素调用，调用的方法是$(元素).SubMenu().

1. 首先在topming.js文件末添加以下js代码

$.fn.SubMenu=function(){
	var isShow=false
	var current=$(this)
	var timeout=200
	var effect=500 //菜单显示效果快慢
	var timer=null
	var offset = current.offset();
	var content=$(this).find(".children").html()
	var hasChild=content?content:"null"

    var sMenu=$("

")
	sMenu.appendTo("body").hide()
	sMenu.append("
"+content+"

")
	sMenu.css("top",offset.top+5).css("left",offset.left+60)
	var showMenu=function(){
		if(isShow)
		{
			return false
		}
		sMenu.fadeIn(effect)
		isShow=true
		sMenu.mouseover(function(){
			clearTimeout(timer)
		})
		sMenu.mouseout(function(){
			hideMenu()
			})
	};
	var hideMenu=function(){
		clearTimeout(timer)
		timer=setTimeout(function(){
		sMenu.fadeOut(effect)
		isShow=false},timeout)
	};
	current.hover(
		function(){
		if(hasChild!="null"){
		clearTimeout()
		timer=setTimeout(function(){showMenu()},timeout)
		}},
		function(){
		if(hasChild!="null"){
		clearTimeout(timer)
		if(isShow)
			timer=setTimeout(function(){hideMenu()},timeout)
		}})
}

2. 在topming.js中的$(document).ready里面添加引用

	$("ul li.cat-item").each(function(){
		$(this).find("a").attr("title","")//删除超链接的title属性，否则会妨碍看到二级菜单
		$(this).SubMenu()
	})

3. 接着在style里面添加弹出层的样式

/*二级菜单样式*/
.catSubMenu {
	clear:both !important;
	position: absolute;
    border-left:1px solid #EEE;
	border-top:1px solid #EEE;
	border-right:2px solid #BBB;
	border-bottom:2px solid #BBB;
	width:100px;
	background-color:#FFF;
	height:auto;
	padding:5px !important;
	margin:0px !important;
}
.catSubMenu ul{ margin-top:0px !important; }
.catSubMenu ul li{
	list-style-type:none;
	margin-left:-40px;
	width:100px;
	border-bottom:1px dashed #CCC;
	text-align:left;
}
.catSubMenu ul li a{ padding-left:5px; display:block;}
.catSubMenu ul li a:hover{ background-color:#EEE;}
.children {
	display:none;
}
.cat-item .children li a:hover {
	background-color:#CCC;
}
.cat-item {
	width:60px;
}

4.在后台外观->小工具中，勾选分类目录的显示层次

由于添加了二级栏目，首页文章列表中的分类信息的分类名如果太长便会被挤下来，不好看，为美观对主题文件作小小修改：
1) index.php中的

the_category(',')

改为

the_category('
','single')

2) 添加样式

.postCategory{height:20px;overflow:hidden;}

最终效果是只显示顶级分类名