我正在跟踪this tutorial 在Wordpress中创建超大菜单。它利用小部件来存放子菜单内容。我的问题是，当回显小部件时，它会在DOM中其父级之外进行渲染。

这是我当前的代码：

<ul class="menu">
    <?php
        $locations = get_nav_menu_locations();
        if ( isset( $locations[ \'mega_menu\' ] ) ) {
            $menu = get_term( $locations[ \'mega_menu\' ], \'nav_menu\' );
            if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
                foreach ( $items as $item ) {
                    echo "<li>";
                    echo "<a href=\\"{$item->url}\\">{$item->title}</a>";
                    if ( is_active_sidebar( \'mega-menu-widget-area-\' . $item->ID ) ) {
                        echo "<div id=\\"mega-menu-{$item->ID}\\" class=\\"mega-menu\\">";
                            dynamic_sidebar( \'mega-menu-widget-area-\' . $item->ID );
                        echo "</div>";
                    }
                echo "</li>";
                }
            }
        }
    ?>
</ul>

小部件内容未呈现为<div>, 而是作为父级的同级渲染<li>.

当前DOM输出：

<ul class="menu">
  <li>
    <a href="http://water-wp/">Home</a>
  </li>
  <li>
    <a href="http://water-wp/solutions/">Solutions</a>
  </li>

  <!-- Should not be a list item, but rather a child div of the previous list item -->
  <li id="text-2" class="widget widget_text">
    <h2 class="widgettitle">Heading</h2>
        <div class="textwidget">hnjsf skhdfj sdf</div>
  </li>
  <div id="mega-menu-32" class="mega-menu"> 1</div>      
</ul>

所需的DOM输出：

<ul class="menu">
  <li>
    <a href="http://water-wp/">Home</a>
  </li>
  <li>
    <a href="http://water-wp/solutions/">Solutions</a>

    <div id="mega-menu-32" class="mega-menu">
      <h2 class="widgettitle">Heading</h2>
      <div class="textwidget">hnjsf skhdfj sdf</div>
    </div>       
  </li>
</ul>

<ul class="menu">
    <?php
        $locations = get_nav_menu_locations();
        if ( isset( $locations[ \'mega_menu\' ] ) ) {
            $menu = get_term( $locations[ \'mega_menu\' ], \'nav_menu\' );
            if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
                foreach ( $items as $item ) {
                    echo "<li>";
                    echo "<a href=\\"{$item->url}\\">{$item->title}</a>";
                    ob_start();
                    dynamic_sidebar(\'mega-menu-widget-area-\' . $item->ID);
                    $sidebar = ob_get_contents();
                    ob_end_clean();
                    if ( is_active_sidebar( \'mega-menu-widget-area-\' . $item->ID ) ) {
                        echo "<div id=\\"mega-menu-{$item->ID}\\" class=\\"mega-menu\\">";
                            echo $sidebar;
                        echo "</div>";
                    }
                echo "</li>";
                }
            }
        }
    ?>
</ul>