title: Static Jquery HTML Menu to Dynamic Wordpress Menu
body: <p>Firstly, Thank You very much to all who try to help around here, some of the answers have saved me a lot of headache.
  Secondly, please assume that I have almost no knowledge of any language.</p>
  
  <p>I am trying to use <strong>apycom.com/menus/12-forest-green.html</strong> menu as a wordpress dynamic menu using the method explained here <strong>cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial</strong>. </p>
  
  <p>Everything Looks great however, the sub menus are not working. Here is an image <a href="http://i.imgur.com/LHGhYyn.jpg" rel="nofollow">http://i.imgur.com/LHGhYyn.jpg</a>.</p>
  
  <p><strong>Edit</strong><br>
  Maybe I wasn't very clear. Let me explain in detail</p>
  
  <p>Step 1: I added this custom walker class to my functions.php</p>
  
  <pre><code>class CSS_Menu_Maker_Walker extends Walker {
  
    var $db_fields = array( 'parent' =&gt; 'menu_item_parent', 'id' =&gt; 'db_id' );
  
    function start_lvl( &amp;$output, $depth = 0, $args = array() ) {
      $indent = str_repeat("\t", $depth);
      $output .= "\n$indent&lt;ul&gt;\n";
    }
  
    function end_lvl( &amp;$output, $depth = 0, $args = array() ) {
      $indent = str_repeat("\t", $depth);
      $output .= "$indent&lt;/ul&gt;\n";
    }
  
    function start_el( &amp;$output, $item, $depth = 0, $args = array(), $id = 0 ) {
  
      global $wp_query;
      $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
      $class_names = $value = ''; 
      $classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;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' =&gt; 'nav_menu_item', 'nopaging' =&gt; true, 'numberposts' =&gt; 1, 'meta_key' =&gt; '_menu_item_menu_item_parent', 'meta_value' =&gt; $item-&gt;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-&gt;ID, $item, $args );
      $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
  
      $output .= $indent . '&lt;li' . $id . $value . $class_names .'&gt;';
  
      $attributes  = ! empty( $item-&gt;attr_title ) ? ' title="'  . esc_attr( $item-&gt;attr_title ) .'"' : '';
      $attributes .= ! empty( $item-&gt;target )     ? ' target="' . esc_attr( $item-&gt;target     ) .'"' : '';
      $attributes .= ! empty( $item-&gt;xfn )        ? ' rel="'    . esc_attr( $item-&gt;xfn        ) .'"' : '';
      $attributes .= ! empty( $item-&gt;url )        ? ' href="'   . esc_attr( $item-&gt;url        ) .'"' : '';
  
      $item_output = $args-&gt;before;
      $item_output .= '&lt;a'. $attributes .'&gt;';
      $item_output .= $args-&gt;link_before . apply_filters( 'the_title', $item-&gt;title, $item-&gt;ID ) . $args-&gt;link_after;
      $item_output .= '&lt;/a&gt;';
      $item_output .= $args-&gt;after;
  
      $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
  
    function end_el( &amp;$output, $item, $depth = 0, $args = array() ) {
      $output .= "&lt;/li&gt;\n";
    }
  } 
  </code></pre>
  
  <p>Step 2: added images folder, menu.js &amp; jquery.js to my theme folder. Also added the below menu css to my theme stylesheet.</p>
  
  <pre><code>/**
   *********************************************
   * Prototype of styles for horizontal CSS-menu
   * @data 30.06.2009
   *********************************************
   * (X)HTML-scheme:
   *  &lt;div id="menu"&gt;
   *      &lt;ul class="menu"&gt;
   *          &lt;li&gt;&lt;a href="#" class="parent"&gt;&lt;span&gt;level 1&lt;/span&gt;&lt;/a&gt;
   *              &lt;ul&gt;
   *                  &lt;li&gt;&lt;a href="#" class="parent"&gt;&lt;span&gt;level 2&lt;/span&gt;&lt;/a&gt;
   *                      &lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;level 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
   *                  &lt;/li&gt;
   *              &lt;/ul&gt;
   *          &lt;/li&gt;
   *          &lt;li class="last"&gt;&lt;a href="#"&gt;&lt;span&gt;level 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
   *      &lt;/ul&gt;
   *  &lt;/div&gt;
   *********************************************
   */
  
  /* 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&gt;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&gt;li:hover&gt;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&gt;li:hover&gt;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;
  }
  </code></pre>
  
  <p>Step 3: made a menu at appearance > menus and named it 'menu' and added this code to my template to print the menu</p>
  
  <pre><code>&lt;?php 
  wp_nav_menu(array(
    'menu' =&gt; 'menu', 
    'container_id' =&gt; 'menu', 
    'link_before' =&gt; '&lt;span&gt;',
    'link_after' =&gt; '&lt;/span&gt;',
    'walker' =&gt; new CSS_Menu_Maker_Walker()
  )); 
  ?&gt;
  </code></pre>
  
  <p>Now as you can see from the image above, the sub menus are stuck on top of the menu and are always visible. However, if there are no submenus, the menu works perfectly including the lavalamp effect.</p>
  
  <p>I hope I am clear enough now. Unfortunalety the answer by @5wordpressthemes doesn't help.
  Thank you for your time.</p>