title: Add sub menu inside div of parent li using the Walker_Nav_Menu for WordPress
body: <p>I am trying to add sub-menu items to the inside of a div of the parent li. </p>
  
  <p>Here is what I get...</p>
  
  <pre><code>&lt;nav class="menu-main-menu-container"&gt;
  &lt;ul id="nav" class=""&gt;
      &lt;li id="menu-item-26" class="visit menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item"&gt;
          &lt;div&gt;
              &lt;a title="Locations | Traditions" href="#"&gt;Visit&lt;/a&gt;
              &lt;span&gt;Locations | Traditions&lt;/span&gt;
              &lt;div class="arrow"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="main_sub_nav_wrap"&gt;
              &lt;h2&gt;Visit&lt;/h2&gt;
          &lt;/div&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
                  &lt;a href="#"&gt;Sub Link 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
                  &lt;a href="#"&gt;Sub Link 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-84" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
                  &lt;a href="#"&gt;Sub Link 3&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I would like is for it to put it into the "main_sub_nav_wrap" like so.</p>
  
  <pre><code>&lt;nav class="menu-main-menu-container"&gt;
  &lt;ul id="nav" class=""&gt;
      &lt;li id="menu-item-26" class="visit menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item"&gt;
          &lt;div&gt;
              &lt;a title="Locations | Traditions" href="#"&gt;Visit&lt;/a&gt;
              &lt;span&gt;Locations | Traditions&lt;/span&gt;
              &lt;div class="arrow"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="main_sub_nav_wrap"&gt;
              &lt;h2&gt;Visit&lt;/h2&gt;
              &lt;ul class="sub-menu"&gt;
                  &lt;li id="menu-item-82" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
                      &lt;a href="#"&gt;Sub Link 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="menu-item-83" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
                      &lt;a href="#"&gt;Sub Link 2&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="menu-item-84" class="menu-item menu-item-type-custom menu-item-object-custom"&gt;
                      &lt;a href="#"&gt;Sub Link 3&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is what I am using to make the nav by extending the walker class...</p>
  
  <pre><code>&lt;?php
  class My_Walker extends Walker_Nav_Menu {
    function start_el(&amp;$output, $item, $depth, $args) {
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
  
       $class_names = $value = '';
  
       $classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes;
  
       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="' . esc_attr( $class_names ) . '"';
  
       $output .= $indent . '&lt;li id="menu-item-'. $item-&gt;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;div&gt;&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;&lt;span&gt;' . $item-&gt;attr_title . '&lt;/span&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="main_sub_nav_wrap"&gt;&lt;div class="main_sub_nav"&gt;&lt;div class="container"&gt;&lt;div class="main_sub_nav_text"&gt;&lt;h2&gt;' . $item-&gt;title . '&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
       $item_output .= $args-&gt;after;
  
       $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
  }
  ?&gt;
  </code></pre>
  
  <p>I use this to add to my template...</p>
  
  <pre><code>&lt;?php
      $walker = new My_Walker;
      wp_nav_menu(array(
          'echo'           =&gt; true,
          'container'      =&gt; '',
          'theme_location' =&gt; 'header_menu',
          'container'      =&gt; 'nav',
          'menu_class'     =&gt; '',
          'menu_id'        =&gt; 'nav',
          'depth'          =&gt; 0,
          'walker'         =&gt; $walker
      ));
  ?&gt;
  </code></pre>