我们要做的效果如上图。

近看到好多博客在导航里面都用了上面这种特效，本着一查到底的精神，我把他们的代码扣了下来，原以为是JS写得特效，直到扒到后一层才发面，原来是CSS3里面的东西，实现起来，比JS要简单很多。

这个写法如下：

?.nav .sub-menu li:hover .sub-menu-2{
?? ?left:;
?? ?background:#c41d1d;
?? ?display:table;
?? ?position:absolute;
?? ?z-index:2013;
?? ?width:;
?? ?border-bottom: 4px solid #156BDA;
?? ?margin-top:-30px;
}

这里面的.sub-menu-2也是一个ul，可能有人会问，这个类名能不能改成UL，答案是否定的，经本人测试，这个地方的要求指代分明，力求唯一，其实想想也不难理解，如果我们用UL来代替这个.sub-menu-2，假如这个代码执行了，那么.nav .sub-menu li下面如果有多个ul，岂不是要乱套了。

所以，即便是我们这里用了一个.sub-menu-2，也是要求这个元素是.nav .sub-menu li下面唯一的一个。

所以，我们要想把wordpress里面的wp_nav_menu做成这样的效果，我们首先要改变得就是wp_nav_menu这个函数的输出，而这个函数的默认输出如下：

<ul>
<li id="menu-item-8" class="...">
<a href="#">5UCMS</a>
<ul class=sub-menu>
<li><a>......</a>
<ul class="sub-menu">
<li>...</li>
</ul>
</li>
</ul>
</li>
</ul>

一个十分完善的输出。这样的输出，其实给我们的CSS带来了很多困扰，所以我们要做得就是改变这样的输出结构。

其实，如果我们想用JS来实现，一旦改变了这个结构，工作就变得简单多了。

关于如何改变这个输出，可以参考这里：http://www.sbmzenith.com/?p=328【wp_nav_menu中的walker详解】

这里不再赘述，举例说明。

其实我们这里这个菜单的层级是有规划的，我们这里以三层为例。先写一个扩展类：

class companyMenu extends Walker_Nav_Menu

重写函数：function start_lvl

其中

?$indent = str_repeat("t", $depth);
?? ??? ?if($depth == 0){
?? ??? ?$output .= "n$indent<ul class="sub-menu">n";
?? ?}
?? ?else if($depth == 1){
?? ??? ?$output .= "n$indent<ul class="sub-menu-2">n";
?? ??? ?}
?? ?}

这里我们级顶层的ul和二级栏目中的ul不同的CLASS。

?if($depth == 0){
?? ??? ?$output .= $indent . '<li>';
?? ??? ?}
?? ??? ?else{
?? ??? ?$output .= $indent . '<li' . $id . $value . $class_names .'>';?? ?
?? ??? ?}

这里我们给顶层的li一个统一的class，便于CSS控制。

然后这样调用：

?<?PHP
?? ?wp_nav_menu(array( ?
??? 'theme_location'? => '', ?
??? 'menu'??????????? => 'head-menu', ?
??? 'container'?????? => 'div', ?
??? 'container_class' => 'nav', ?
??? 'container_id'??? => 'nav',
??? 'echo'??????????? => 1, ?
??? 'fallback_cb'???? => 'wp_page_menu', ?
??? 'before'????????? => '', ?
??? 'after'?????????? => '', ?
??? 'link_before'???? => '', ?
??? 'link_after'????? => '', ?
??? 'items_wrap'????? => '<ul>%3$s</ul>', ?
??? 'depth'?????????? => 0, ?
??? 'walker'????????? => new companyMenu('') ?
));
?>

接下来就是CSS了。