title: Add custom markup to Wordpress menu
body: <p>I've been search for a long time now for a solution to this problem but found nothing so you guys will be my last hope!</p>
  
  <p>I'm trying to build a new CSS3 menu on a Wordpress 3 site that I'm working on. I would need to extend the default menu mark-up but not sure how.</p>
  
  <p>This is the tag I'm using in the theme to output the menu at the moment:</p>
  
  <pre><code>&lt;?php wp_nav_menu( array( 'container_class' =&gt; 'menu-header', 'theme_location' =&gt; 'primary' ) ); ?&gt;
  </code></pre>
  
  <p>At the moment my default menu mark-up looks like this:</p>
  
  <pre><code>&lt;div class="menu-header"&gt;
   &lt;ul id="menu-main-menu" class="menu"&gt;
    &lt;li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt;
    &lt;li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;
     &lt;ul class="sub-menu"&gt;
      &lt;li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt;
    &lt;li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;
     &lt;ul class="sub-menu"&gt;
      &lt;li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to add 2 div's around each <code>&lt;ul class="sub-menu"&gt;...&lt;/ul&gt;</code>
  So I would need the mark-up to look like this:</p>
  
  <pre><code>&lt;div class="menu-header"&gt;
   &lt;ul id="menu-main-menu" class="menu"&gt;
    &lt;li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt;
    &lt;li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;
     &lt;div class="sub-menu-container"&gt;
      &lt;div class="submenu"&gt;
       &lt;ul class="sub-menu"&gt;
        &lt;li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/li&gt;
    &lt;li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt;
    &lt;li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;
     &lt;div class="sub-menu-container"&gt;
      &lt;div class="submenu"&gt;
       &lt;ul class="sub-menu"&gt;
        &lt;li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt;
        &lt;li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"&gt;&lt;a href="#"&gt;Sub Level Menu Item&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/li&gt;
    &lt;li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"&gt;&lt;a href="#"&gt;Top Level Menu Item&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Does anyone know how to do this please?</p>