Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to figure out if it's possible to show the submenu's outside of the relevant li tag.
For example, this php:

wp_nav_menu(array(
    'menu'  =>  'side',
    'container' => false,
    'menu_class'      => 'side-menu'
));
?>

will render the menu like so:

<ul id="menu-main" class="menu">
    <li id="menu-item-01" class="menu-item">Menu 01</li>
    <li id="menu-item-02" class="menu-item">Menu 02
        <ul class="submenu">
            <li class="submenu-item">Sub 01</li>
            <li class="submenu-item">Sub 02</li>
            <li class="submenu-item">Sub 03</li>
        </ul>
    </li>
    <li id="menu-item-03" class="menu-item">Menu 03</li>
    <li id="menu-item-04" class="menu-item">Menu 04</li>
</ul>

...when what I'd actually like to achieve is something like this:

<ul id="menu-main" class="menu">
    <li id="menu-item-01" class="menu-item">Menu 01</li>
    <li id="menu-item-02" class="menu-item">Menu 02</li>
        <ul class="submenu">
            <li class="submenu-item">Sub 01</li>
            <li class="submenu-item">Sub 02</li>
            <li class="submenu-item">Sub 03</li>
        </ul>
    <li id="menu-item-03" class="menu-item">Menu 03</li>
    <li id="menu-item-04" class="menu-item">Menu 04</li>
</ul>

with the relevant submenu sitting below it's corresponding menu item, the reason being the submenus are initially hidden and slide down upon clicking the relevant menu item and each menu item is styled, thus wrapping a submenu inside it throws everything out. Is this at all possible?

share|improve this question
    
You don't need to alter the markup to be invalid in order to make this work. CSS and Javascript work perfectly well with the valid markup, but pure CSS/Javascript questions are off topic per the faq. –  s_ha_dum Jun 18 '13 at 16:03
add comment

1 Answer 1

up vote 1 down vote accepted

It is possible to change the output of the menu, by creating a new menu Walker. I wouldn't recommend this solution, however, since you're attempting to do something that's actually invalid HTML - the ul tag should only have li tags inside it, never anything else.

I know it's possible to create the solution you're looking for with css and javascript, as I've done it many times before. I can't speak to your particular situation for an exact solution, but possibly try styling the a links inside the li for the main menu; then your nested submenus can have whatever styles they need.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.