从静态Jquery HTML菜单到动态Wordpress菜单

首先，非常感谢所有在这里帮助我的人，有些答案让我省去了很多头疼。 其次，请假设我几乎不懂任何语言

我正在尝试使用cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial中介绍的方法，将apycom.com/menus/12 forest green.html菜单用作wordpress动态菜单

一切看起来都很好，但子菜单不起作用。这是一张图片

编辑
也许我不是很清楚。让我详细解释一下

步骤1：我将这个自定义walker类添加到我的functions.php中

class CSS_Menu_Maker_Walker extends Walker {

  var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul>\n";
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = ''; 
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    /* Add active class */
    if(in_array('current-menu-item', $classes)) {
      $classes[] = 'active';
      unset($classes['current-menu-item']);
    }

    /* Check for children */
    $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
    if (!empty($children)) {
      $classes[] = 'has-sub';
    }

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\n";
  }
} 

类CSS\u菜单\u生成器\u Walker扩展Walker{
var$db\u fields=array（'parent'=>'菜单项\u parent'，'id'=>'db\u id'）；
函数start_lvl（&$output，$depth=0，$args=array（））{
$indent=str\u repeat（“\t”，$depth）；
$output.=“\n$indent
\n”；
}
函数end_lvl（&$output，$depth=0，$args=array（））{
$indent=str\u repeat（“\t”，$depth）；
$output.=“$indent
\n”；
}
函数start_el（&$output，$item，$depth=0，$args=array（），$id=0）{
全局$wp_查询；
$indent=（$depth）？str_repeat（“\t”，$depth）：”；
$class_name=$value=''；
$classes=空（$item->classes）？array（）：（array）$item->classes；
/*添加活动类*/
if（在数组中（'current-menu-item'，$classes））{
$classes[]=“活动”；
未设置（$classes['current-menu-item']）；
}
/*检查有无儿童*/
$children=get_posts（数组（'post_type'=>'nav_menu_item'，'nopage'=>true，'numberposts'=>1，'meta_key'=>'，'meta_menu item_menu menu item_parent'，'meta_value'=>$item->ID））；
如果（！空（$children））{
$classes[]='有子'；
}
$class_name=join（“”，应用_过滤器（'nav_menu_css_class'，数组_过滤器（$classes），$item，$args））；
$class\u names=$class\u names？'class=“”.esc\u attr（$class\u names）。“：”；
$id=应用过滤器（'nav_菜单项\u id'，'menu item-'。$item->id，$item，$args）；
$id=$id？'id=“.esc_attr（$id）。”：“”；
$output.=$indent.'；
$attributes=！empty（$item->attr_title）？'title=“”.esc_attr（$item->attr_title）。”：“”；
$attributes.=！empty（$item->target）？'target=“”.esc_attr（$item->target）。“：”；
$attributes.=！empty（$item->xfn）？'rel=“”.esc_attr（$item->xfn）。“：”；
$attributes.=！empty（$item->url）？'href=“”.esc_attr（$item->url）。“：”；
$item_output=$args->before；
$item_输出='
*

*

*

*
*
*
*

*
*  
*********************************************
*/
/*菜单：：基本*/
div#菜单{
高度：46px；
左侧填充：24px；
背景：url（images/left.png）不重复；
_背景：url（images/left.gif）不重复；
宽度：自动；
}
div#菜单ul{
保证金：0；
填充：0；
列表样式：无；
浮动：左；
}
div#menu ul.menu{
右边填充：24px；
背景：url（images/right.png）无重复右0；
_背景：url（images/right.gif）无重复右0；
}
div#menu li{
位置：相对位置；
保证金：0；
填充：0；
显示：块；
浮动：左；
z指数：9；
宽度：自动；
}
菜谱{
z指数：9；
}
div#菜单li div{
列表样式：无；
浮动：左；
位置：绝对位置；
z指数：11；
顶部：39px；
左-18px；
-左：4px；
可见性：隐藏；
宽度：180px；
利润率：0px0-4px；
填充：0；
背景：url（图片/子菜单top.png）不重复0px 0；
-背景：url（images/submenu top.gif）不重复0px 0；
}
分区菜单ul{
z指数：12；
宽度：180px；
填充：0px 0px 12px 0px；
-填充：0px 0px 3px 0px；
背景：url（images/submenu bottom.png）无重复0px底部；
-背景：无；
利润率：14px0；
-保证金：5px0；
}
div#菜单li：悬停>div{
能见度：可见；
}
div#菜单a{
位置：相对位置；
z指数：10；
高度：38px；
显示：块；
浮动：左；
线高：38px；
文字装饰：无；
页边顶部：1px；
空白：nowrap；
宽度：自动；
右侧填充：5px；
文本对齐：居中；
}
div#菜单范围{
边缘顶部：2倍；
左侧填充：15px；
颜色：#fff；
字体：正常13px塔荷马；
背景：无；
线高：38px；
显示：块；
光标：指针；
背景重复：无重复；
背景位置：95%0；
文本对齐：居中；
}
/*菜单：：级别1*/
div#菜单a{
填充：0 15px 0 0；
线高：38px；
高度：46px；
_右边距：1px；
背景：无；
字体大小：粗体；
}
div#菜单范围{
字体大小：粗体；
}
div#菜单a：悬停{
背景图像：url（images/selected-sub.png）；
背景重复：重复-x；
背景位置：右-1px；
-背景：url（images/selected-sub.gif）repeat-x right-1px；
}
div#menu li.current a，
div#menu ul.menu>li:悬停>a{
背景图像：url（images/selected-sub.png）；
背景重复：重复-x；
背景位置：右-1px；
-背景：url（images/selected-sub.gif）repeat-x right-1px；
}
div#菜单a：悬停范围{
颜色：#000000；
}   
div#menu ul.menu>li:悬停>跨距{
颜色：#000000；
}
div#menu li{}
div#menu li.last{background:none；}
/*菜单：：级别2*/
菜谱{
背景图片：url（images/sep-sub.png）；
背景重复：重复-x；
背景位置：左下；
保证金：0；
填充：0；
}
div#menu ul li:悬停{
背景图像：url（图像/子项hover.gif）；
背景色：#717171；
背景重复：重复-x；
背景位置：左上；
}
/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a href="#" class="parent"><span>level 1</span></a>
 *              <ul>
 *                  <li><a href="#" class="parent"><span>level 2</span></a>
 *                      <ul><li><a href="#"><span>level 3</span></a></li></ul>
 *                  </li>
 *              </ul>
 *          </li>
 *          <li class="last"><a href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
    height: 46px;
    padding-left: 24px;
    background: url(images/left.png) no-repeat;
    _background: url(images/left.gif) no-repeat;
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 24px;
    background: url(images/right.png) no-repeat right 0;
    _background: url(images/right.gif) no-repeat right 0;    
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 39px;
    left: -18px;
    -left: 4px;
    visibility: hidden;
    width: 180px;
      margin: 0px 0 0 -4px;
    padding: 0; 
    background: url(images/submenu-top.png) no-repeat 0px 0;
    -background: url(images/submenu-top.gif) no-repeat 0px 0; 
}
div#menu ul ul {
      z-index: 12;
      width: 180px;
    padding: 0px 0px 12px 0px;
    -padding: 0px 0px 3px 0px;    
    background: url(images/submenu-bottom.png) no-repeat 0px bottom;
    -background: #E4E4E2 none;        
    margin: 14px 0 0 0;   
    -margin: 5px 0 0 0;      
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 38px;
    display: block;
    float: left;
    line-height: 38px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right:5px;
    text-align:center;
}
div#menu span {
    margin-top: 2px;
    padding-left: 15px;
    color: #fff;
    font: normal 13px Tahoma;
    background: none;
    line-height: 38px;  
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 15px 0 0;
    line-height: 38px;
    height: 46px;
    _margin-right: 1px;
    background: none;
    font-weight:bold;    

}
div#menu span {
    font-weight:bold; 
}
div#menu a:hover{
    background-image: url(images/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;    
    -background: url(images/selected-sub.gif) repeat-x right -1px; 
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background-image: url(images/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;  
    -background: url(images/selected-sub.gif)  repeat-x right -1px; 
}
div#menu a:hover span{
      color: #000000;
}   
div#menu ul.menu>li:hover>a span {
      color: #000000;
}
div#menu li {}
div#menu li.last { background: none; }


/* menu::level2 */
div#menu ul ul li {
    background-image: url(images/sep-sub.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    margin: 0;
    padding: 0;
}
div#menu ul ul li:hover {
    background-image: url(images/sub-item-hover.gif);
    background-color: #717171;
    background-repeat: repeat-x;
    background-position: left top;
}
div#menu ul ul a {
      color: #000000;   
    height: auto;
    float: none;
    display: block;
    line-height: 25px;
    font-size: 13px;
    z-index: -1;
    padding: 6px 0 6px 0px;
    white-space: normal;
    width: 166px;
    margin: 0 0px 0 13px;
    background: none;
}

div#menu ul ul a span {
    color: #000000; 
      padding: 0 3px;
    line-height: 25px;
    font-size: 13px;
    font-weight: normal;
    margin:0;    
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background: none;
}
div#menu ul ul a:hover {
    background: none;
  color: #fff;
}
div#menu ul ul a:hover span {
  background: none;
  color: #fff;
}
div#menu ul ul a.parent {
  background: url(images/submenu-pointer.png) no-repeat right top;
  -background: url(images/submenu-pointer.gif) no-repeat right top;  
  margin-right: -1px;
}
div#menu ul ul a.parent span {
  padding-right: 26px;
}
div#menu ul ul a.parent:hover {
  background: url(images/submenu-pointer-hover.gif) no-repeat right top;
  -background: url(images/submenu-pointer.gif) no-repeat right top;  
}
div#menu ul ul a.parent:hover span {
}
div#menu ul ul span {

    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */

div#menu ul ul div {
      width: 180px;
      padding: 0;
    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
    -background: url(images/subsubmenu-top.gif) no-repeat 0px 0;      
    margin: -32px 0 0 198px !important;
    margin: -32px 0 0 176px;
}
div#menu ul ul ul {
    padding: 11px 0px 9px 0px;  
    margin: 20px 0 0 0; 
}
div#menu ul ul div li {
    position:relative;
    top:-10px;
}

/* lava lamp */
div#menu li.back {
    background: url(images/selected-sub.png) no-repeat 0 0;
    -background: url(images/selected-sub.gif) no-repeat 0 0;    
    width: 5px;
    height: 46px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0px 0 0 0;
}


div#menu li.back .left {
    padding:0;
    width:auto;
    background: url(images/selected-sub.png) repeat-x right 0;
    -background: url(images/selected-sub.gif) repeat-x right 0;     
    height: 46px;
    margin: 0 0 0 5px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}

<?php 
wp_nav_menu(array(
  'menu' => 'menu', 
  'container_id' => 'menu', 
  'link_before' => '<span>',
  'link_after' => '</span>',
  'walker' => new CSS_Menu_Maker_Walker()
)); 
?>

<?php $defaults = array(
    'theme_location'  => '',
    'menu'            => 'Your menu name', 
    'container'       => 'ul', 
    'container_class' => 'menu-{menu slug}-container', 
    'container_id'    => 'div',
    'menu_class'      => 'menu', 
    'menu_id'         => 'menu-{menu slug}[-{increment}]',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''
); ?>
                  <?php wp_nav_menu( $defaults ); ?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/menu.css" type="text/css" media="screen" />

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul>\n";
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
  }

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= '<div><ul class="sub-menu">';
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= '</ul></div>';
  }

div#menu ul ul a.parent {
  background: url(images/submenu-pointer.png) no-repeat right top;
  -background: url(images/submenu-pointer.gif) no-repeat right top;  
  margin-right: -1px;
}
div#menu ul ul a.parent span {
  padding-right: 26px;
}
div#menu ul ul a.parent:hover {
  background: url(images/submenu-pointer-hover.gif) no-repeat right top;
  -background: url(images/submenu-pointer.gif) no-repeat right top;  
}