在做WordPress网站的时候，常常需要制作一个漂亮的下拉菜单，用默认的菜单调用代码

会输出复杂的div标签，不利于导航的自定义。

我们用去除WordPress自定义菜单样式的代码：

<?php
echo str_replace("</ul></div>", "", ereg_replace("<div[^>]*><ul[^>]*>", "", wp_nav_menu(array('theme_location' => 'head_nav1', 'echo' => false)) ));
?>

可以输出一下纯净的html样式：

<li><a href="https://127.0.0.1:88/wp/?page_id=2">示例页面</a></li>    
<li><a href="https://127.0.0.1:88/wp/?cat=1">未分类</a></li>    
<li><a href="https://127.0.0.1:88/wp/?page_id=101">手气不错</a>    
<ul class="sub-menu">    
	<li><a href="https://127.0.0.1:88/wp/?cat=4">分类2</a></li>    
	<li><a href="https://127.0.0.1:88/wp/?page_id=103">所有专题</a>    
	<ul class="sub-menu">    
		<li><a href="https://127.0.0.1:88/wp/?page_id=102">所有标签</a></li>    
	</ul>    
</li>    
</ul>    
</li>

我们只需要对sub-menu标签进行css定义就可以实现下拉菜单。

首先需要在网页body前加入一下js代码：

<script>     
$(document).ready(function(){    
$(".menu-item").hover(function(){    
$(this).find("ul").show();    
},function(){    
$(this).find("ul").hide();    
});    
$(".fox_ri a").hover(function(){    
$(this).toggleClass('on')})    
});    
</script>

然后在style.css中加入样式：

.sub-menu {padding-top:15px;padding-left:0px;text-align: center; position:absolute; width:100%; background:#042d4e; display:none; }
.sub-menu li{width:100%;}
.sub-menu li a:hover{color: #ff8500;}
.sub-menu li a {line-height: 40px;min-width:115px;text-align: center; color: #fff; font-weight: bold; padding: 5px 0px 5px 0px;/*padding兼容低版IE*/}

即可实现自定义下拉菜单的功能。

显示效果如下：