Automatically Display Sub Menu

If your developing this theme with your own html mark up and css then should be fairly easy…

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'topNav', 'after' => '<span> </span>' ) ); ?>

You will notice this menu PHP generates a unordered list with your sub menu as a nested unordered list.

See your generated markup in the dom, it will look like this sort of…

<ul class="menu">

    <li class="menu-item">
        <a href="https://wordpress.stackexchange.com/questions/56978/...">Home</a>
    </li>

    <li class="menu-item current-menu-parent">  
        <a href="https://wordpress.stackexchange.com/questions/56978/...">Store</a>

        <ul class="sub-menu" style="display: none;">

            <li class="sub-menu-item">
                <a href="https://wordpress.stackexchange.com/questions/56978/...">My Account</a>
            </li>

            <li class="sub-menu-item current-menu-item">
                <a href="https://wordpress.stackexchange.com/questions/56978/...">Track your order</a>
            </li>

            <li class="sub-menu-item">
                <a href="https://wordpress.stackexchange.com/questions/56978/...">Checkout - Pay</a>
            </li>

        </ul>

    </li>

    <li class="menu-item">
        <a href="https://wordpress.stackexchange.com/questions/56978/...">Workshop</a>
    </li>

    <li class="menu-item">
        <a href="https://wordpress.stackexchange.com/questions/56978/...">Gallery</a>
    </li>

</ul>

You can see in the markup that wordpress generates a class for each element.

And when your menu item is active, wordpress add’s active class current-menu-item or current-menu-parent to the li’s

So using some jquery like below, you can control visibility of those sub elements…

var allSubmenus = $('.sub-menu').hide();
// this variable makes all sub menu ul's 'display: none;'

$('li.current-menu-parent, li.current-menu-item').find('ul').show();
// if these li's have current class's, they're set to 'display: block', this is for page reloads so the current menu is visible on page load.

$('li.menu-item a').click(function() {
    allSubmenus.hide();
    $(this).parent().find('ul').show();
});
// this basically, when a menu link is clicked, hides all sub menu's using our variable, then finds any child ul's (sub menu) and set's to 'display block'

Then after this, you have to be clever with your css and position your ul.sub-menu absolute to the parent ul.menu { position: relative } – and make sure the li.menu-item and ul.menu overflow is set to visible, but li.menu-item has to have NO positioning.

Let me know if you can’t figure out the CSS.

---

UPDATE

I pretty much just realised, if your sub menus only appear on the current-menu-item page itself, and you don’t wan’t the sub menu to appear whilst on another page from the main menu… then you simply just set your css like this, no jQuery needed… (but using the same css method mentioned above too)

ul.menu {
   position: relative;
   overflow: visible;
}

li.menu-item {
   /* No positioning */
   overflow: visible;
   float: left;
}

ul.sub-menu {
   display: none;
   position: absolute;
}

li.sub-menu-item {
   float: left;
}

li.current-menu-parent ul,
li.current-menu-item ul {
   display: block !important;
}