实用的主导航能让用户明白自己在哪个位置，快速了解网站的基本结构，而不至于迷路。主导航不建议设计得太复杂，子栏目过多，鼠标反馈下拉、特效反而让体验下降。只需要向用户表达当前页面即可，通常把当前栏目高亮、加粗、差异颜色等方式，用CSS样式就能解决这个问题。

Wordpress很多主题都的导航栏部分大都在 header.php 下，导航部分代码如下

<ul>
<li <?php  if  (is_home ( ) )  {  echo  ' class="current-cat"' ; }  ?>><a title="Home" href="/">博客主页</a></li>
<?php
 $currentcategory  =  '' ;

 // 导航栏添加分类列表start
 // 如果你不想添加分类到导航中,请删除该代码块
 if ( !is_page ( )  &&  !is_home ( ) )  {
   $catsy  = get_the_category ( ) ;
   $myCat  =  $catsy [ 0 ] -> cat_ID ;
   $currentcategory  =  '&current_category=' . $myCat ;
 }
 wp_list_categories ( 'depth=1&title_li=&show_count=0&hide_empty=0&child_of=0' . $currentcategory ) ; 
 // depth=1 是一级栏目，调用二级的子级栏目depth=2，以此类推
 // 导航栏添加分类列表end

 // 导航栏添加页面列表start
 // 如果你不想添加页面到导航中,请删除该代码块
 wp_list_pages ( 'depth=1&title_li=&sort_column=menu_order' ) ;
 // 导航栏添加页面列表end
?>
</ul>

可以看到当前栏目会变成 <li class="current-cat">，里面的class类名根据实际需要修改，控制CSS样式即可，如：

<style type="text/css">
 li.current-cat{color:#fff;background:#c00}
</style>

调用子栏目后，<li>...</li>中间会增加下面的代码块，根据实际情况编写CSS样式

<ul>
 <li>
  <a href="/list-1/">栏目1</a>
  <ul class="children">
  ...
  </ul>
 </li>
 ...
</ul>

CSS样式

<style type="text/css">
 ul.children{display:none;}
 ul.children li a{color:#fff;background:#c00;}
 ul li:hover ul.children{display:block;}
</style>