Break apart wp_list_pages in order to customise it

I’m trying to ‘break apart’, (think explode is the correct terminology), wp_list_pages in order to add some definition list code into it, (dl, dt, dd).

Here is the html code that I’m trying to output:

<div id="nav">             
            <ul id="drop-nav">                 
                <li><a href="#">About Us</a>
                <div class="subnav">
                        <div class="subnavTop">
                            <ul class="subnavContent">
                                <li>
                                    <dl>                                             
                                        <dt><a href="#">Help Desk</a></dt>
                                        <dd><a href="#">Email your question</a></dd>
                                        <dd><a href="#">Text a question</a></dd>            
                                    </dl>                                      
                                    <dl>
                                        <dt><a href="#">Life stories</a></dt>                                                 
                                        <dt><a href="#">Statistics</a></dt>
                                        <dd><a href="#">World Statistics</a></dd>
                                        <dd><a href="#">UK Statistics</a></dd>
                                        <dd><a href="#">South West Statistics</a></dd>
                                        <dd><a href="#">Research projects</a></dd>                    
                                    </dl>                                        
                                </li>                   
                            </ul>
                        </div>                           
                    </div>
                </li> 
                <li><a href="#">Talk to us</a></li>
            </ul>
            <br style="clear: left" />
    </div>

Here is my current outputted html code:

<div id="nav">  
            <ul id="drop-nav">          
                <li><a href="#">About Us</a>
                <div class="subnav">
                        <div class="subnavTop">
                            <ul class="subnavContent">
                                <li class="page_item page-item-15"><a href="#">Child of About</a>
                                    <ul class='children'>
                                        <li class="page_item page-item-28"><a href="#">Grandchild of About</a></li>
                                    </ul>
                                </li>

                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">Talk to us</a></li>
            </ul>
    <br style="clear: left" />
    </div>

Which is generated using the following code from within my header.php, (can’t remember which site I found this on):

<div id="nav">  
    <ul id="drop-nav">          
    <?php
    // Query the database for all top-level page IDs, and store them in the $menuPages array under the [ID] sub-array
    $menuPages = $wpdb->get_results("SELECT ID FROM $wpdb->posts WHERE post_parent=0 AND post_type='page' AND post_status='publish' ORDER BY menu_order ASC");

    // For each element in the $menuPages array, get the value from the [ID]-subarray to create the top-level menu and it's children
    foreach($menuPages as $menuItem){
        $menuItemTitle = get_the_title($menuItem->ID);          
        $menuItemClass = strtolower(trim($menuItemTitle));                  
        $menuItemClass = preg_replace('/[^a-z0-9-]/', '-', $menuItemClass);
        $menuItemClass = preg_replace('/-+/', "-", $menuItemClass);             
        $menuItemPermalink = get_permalink($menuItem->ID);
            if (isset($menuItemTitle) && $menuItemTitle != 'Home'){                 
                _e('<li class="'.$menuItemClass.'">'.PHP_EOL);
                _e('<a href="'.$menuItemPermalink.'">'.$menuItemTitle.'</a>'.PHP_EOL);

            // Run wp_list_pages to fetch any children, and put the HTML <LI> list results into $menuItemChildren as a string
                $menuItemChildren = wp_list_pages('title_li=&echo=0&depth=1&sort_column=menu_order&child_of='.$menuItem->ID);

            // If results were returned, $menuItemChildren is now a string with HTML in it, so create a drop-down and echo out the HTML
                if($menuItemChildren){                      
                    _e('<div class="subnav">'.PHP_EOL);
                    _e('<div class="subnavTop">'.PHP_EOL);
                    _e('<ul class="subnavContent">'.PHP_EOL);                                   
                    echo $menuItemChildren . PHP_EOL;
                    _e('</ul>'.PHP_EOL);
                    _e('</div>'.PHP_EOL);
                    _e('</div>'.PHP_EOL);                       
                }
                _e('</li>'.PHP_EOL);            
            }
        }
    ?>
    </ul>
    <br style="clear: left" />
    </div>

To be honest, this is confusing the life out of me. I can see that it should work, just not sure how to make it work. I somehow need to change each child page/item into a , the grandchildren into ‘s, all wrapped up nicely in ‘s.

Hope this makes sense. Any ideas/help greatly appreciated, S.

(The code is being used to dynamically generate a ‘mega-menu’)

/*Updated Walker Class code below 08-03-11, as originally provided by wyrfel – many thanks */

class My_Walker_Page extends Walker {
var $tree_type = 'page';

var $db_fields = array ('parent' => 'post_parent', 'id' => 'ID');

function start_lvl(&$output, $depth) {
    $indent = str_repeat("t", $depth);
    switch ($depth) {
        case 0:
            $output .= "<div class="subnav">n";
            $output .= "<div class="subnavTop">n";
            $output .= $indent."<ul class='subnavContent'>n";
            $output .= "<li>n<dl>n";
            break;
        case 1:                
            break;
        default:
            break;
    }
}

function end_lvl(&$output, $depth) {
    $indent = str_repeat("t", $depth);
    switch ($depth) {
        case 0:
            $output .= "n</dl>n</li>n";
            $output .= "</ul>n";
            $output .= "</div>n";
            $output .= "</div>n";
            break;
        case 1:                
            break;
        default:
            break;
    }
}

function start_el(&$output, $page, $depth, $args, $current_page) {
    if ( $depth )
        $indent = str_repeat("t", $depth);
    else
        $indent = '';

    extract($args, EXTR_SKIP);
    $css_class = array('page_item', 'page-item-'.$page->ID);
    if ( !empty($current_page) ) {
        $_current_page = get_page( $current_page );
        _get_post_ancestors($_current_page);
        if ( isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors) )
            $css_class[] = 'current_page_ancestor';
        if ( $page->ID == $current_page )
            $css_class[] = 'current_page_item';
        elseif ( $_current_page && $page->ID == $_current_page->post_parent )
            $css_class[] = 'current_page_parent';
    } elseif ( $page->ID == get_option('page_for_posts') ) {
        $css_class[] = 'current_page_parent';
    }

    $css_class = implode(' ', apply_filters('page_css_class', $css_class, $page));

    $page_link = '<a href="' . get_permalink($page->ID) . '" title="' . esc_attr( wp_strip_all_tags( apply_filters( 'the_title', $page->post_title, $page->ID ) ) ) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';
    $top_class = strtolower(trim($page->post_title));                   
    $top_class = preg_replace('/[^a-z0-9-]/', '-', $top_class);
    $top_class = preg_replace('/-+/', "-", $top_class);         

    switch ($depth) {
        case 0:
            $output .= $indent . '<li class="' . $top_class . '">'.$page_link . PHP_EOL;
            break;
        case 1:
            $output .= $indent . '<dt>'.$page_link.'</dt>' . PHP_EOL;
            break;
        default:
            $output .= $indent . '<dd>'.$page_link.'</dd>' . PHP_EOL;
            break;
    }

    if ( !empty($show_date) ) {
        if ( 'modified' == $show_date )
            $time = $page->post_modified;
        else
            $time = $page->post_date;
        $output .= " " . mysql2date($date_format, $time);
    }
}

function end_el(&$output, $page, $depth) {
    switch ($depth) {
        case 0:
            $output .= "</li>n";
            break;
        case 1:
            break;
        default:
            break;
    }
}
}