Wordpress中的导航菜单

我在WordPress网站上有这个导航代码

<header id="header" class="group">
  <div class="margin group">
    <div id="header-title" class="group">
      <?php if ( !is_singular() || ( is_page() && prima_get_post_meta( '_page_title_hide' ) ) || is_page_template('page_blog.php') ) : ?>
        <h1 class="site-title">
          <a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
        </h1>
      <?php else : ?>
        <div class="site-title">
          <a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
        </div>
      <?php endif; ?>
      <?php do_action( 'prima_header_left' ); ?>
      </div>
      <div id="header-menu" class="group">
      <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'fallback_cb' => '', 'echo' => true, 'container' => false, 'menu_id' => 'menu-primary', 'menu_class' => 'sf-menu menu-primary' ) ); ?>   
      <?php do_action( 'prima_header_right' ); ?>
    </div>
  </div>
</header>

我希望输出如下：

<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active has-sub'><a href='#'>Products</a>
      <ul>
         <li class='has-sub'><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'>Products</a>
      <ul>
         <li class='has-sub'><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

如何编写此代码？

---

我对WordPress编程没什么概念。我对活动css类感到困惑，因为给出的WP代码没有，但我需要实现它。

尝试通过functions.php中的以下代码添加

---

是否有.active的CSS？是的，有.active类的CSS动画

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if( in_array('current-menu-item', $classes) ){
             $classes[] = 'active ';
     }
     return $classes;
}