showing current page sub menu only using wp nav menu

Question

I'm trying to show third tier menu items only using wp nav menu and css but am not having any luck. My menu is structured as follows:

Tier 1 Menu Item
Tier 1 Menu Item
Tier 1 Menu Item (Page Parent)
    Tier 2 Menu Item
    Tier 2 Menu Item
    Tier 2 Menu Item (Current Page)
        Tier 3 Menu Item (Current Page Child)
        Tier 3 Menu Item (Current Page Child)

I'm trying to hide everything except the Current Page's children. IE - I want to hide all Tier 1 and 2 menu items and show Tier 3 menu items from current page only.

My menu has a container class of .jo-child-menu and I'm using the following css to try and make it happen:

ul.jo-child-menu li{display:none;}
ul.jo-child-menu ul.sub-menu li{display:none;}
ul.jo-child-menu ul.sub-menu li.current-page-item ul.sub-menu li{display:block;}

The result is that no menu items are being shown. I've tried many other lines of css but all of them either give me the entire menu, no menu, or only first or second tier menu items.

Kisspa Kisspa · Accepted Answer · 2014-06-10T05:11:31

your view this example

 <ul id="coolMenu">
    <li>
        <a href="#"> 
            <img src = "gear_icon.png" class = "nav" height = "20px" width = "20px" style="display:none">insertimage
        </a>
        <ul>
            <li>
                <a href = "#"> Colors </a>
                <ul>
                    <li><a href = "#"> Blue </a></li>
                    <li><a href = "#"> Green </a></li>
                    <li><a href = "#"> Red </a></li>
                </ul>

            </li>
            <li><a href="#">Background</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
</ul>

http://jsfiddle.net/kisspa/2bqQL/

showing current page sub menu only using wp nav menu

1 Answers