Question

I’ve got a menu that is generated using the wordpress template tag <?php wp_nav_menu(); ?>.

The generated code is:

<div class="menu">
<ul>
<li class="current_page_item">Current Page</li>
    <li class="page_item page-item-58">Menu Item #1
        <ul class='sub-menu'>
            <li class="page_item page-item-62">Child Item #1</li>
            <li class="page_item page-item-60">Child Item #2</li>
        </ul><!--END page-item-58 -->
    </li>
</ul>
</div>

My question is: how do you prevent <ul class='sub-menu'> from become a child of <li class="page_item page-item-58">?

I would like the generated code to look like this:

<div class="menu">
<ul>
<li class="current_page_item">Current Page</li>
    <li class="page_item page-item-58">Menu Item #1</li><!--END page-item-58 -->
    <ul class='sub-menu'>
        <li class="page_item page-item-62">Child Item #1</li>
        <li class="page_item page-item-60">Child Item #2</li>
    </ul>
</ul>
</div>

I can’t seem to find an answer.

Answer 1

This is not something you should be trying to achieve. It is illegal for the ul element to be a child of another ul element : http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element

See also the w3 spec : http://www.w3.org/TR/html401/struct/lists.html#h-10.2