css - 仅使用 wp 导航菜单显示当前页面子菜单

Question

我试图仅使用 wp nav menu 和 css 显示第三层菜单项，但我没有任何运气。我的菜单结构如下:

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)

我试图隐藏除当前页面的子项之外的所有内容。 IE - 我想隐藏所有第 1 层和第 2 层菜单项，并仅显示当前页面的第 3 层菜单项。

我的菜单有一个 .jo-child-menu 容器类，我正在使用以下 css 来尝试实现它:

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;}

结果是没有显示任何菜单项。我尝试过许多其他行的 css，但它们要么给我整个菜单、没有菜单，要么只给我第一层或第二层菜单项。

Answer 1

你看这个例子

 <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/