Active property on sub-menu in WordPress

3 Views

I have been struggling with this problem for weeks now and would really love to find a solution to this CSS-issue. If it’s even possible, how do I make the sub-menu stay visible when the parent is active?

The CSS works great with the :hover property, but cant figure out how to make the sub-menu block stay visible with :active.

Read More
<nav id="menu" role="navigation">  
    <?php wp_nav_menu(); ?>
</nav><!-- #menu -->

#menu ul li:hover ul.sub-menu,
#menu ul li:hover ul.sub-menu li,
#menu ul li:hover ul.sub-menu li a { display: block; }

Would really appreciate some help or any ideas at all so I don’t waste more time on trying to solve this if it can’t be solved with CSS only.

Regards, Bellisia

Edit: 

<nav id="menu" role="navigation">  
    <div class="menu-headmenu-container">
        <ul id="menu-headmenu" class="menu">
            <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-17">
                <a href="http://yyy.com/">Home</a>
            </li>
            <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15">
                <a href="http://yyy.com/services/">Services</a>
                <ul class="sub-menu">
                    <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
                        <a href="http://yyy.com/contact/">Contact</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav><!-- #menu -->
Post Views: 3

Related posts

Leave a Reply

4 comments

  1. When you click on say Contact (sub nav item),
    the (*current_page_item*) class should be applied to that li?

    in which case, could you not just use..

    #menu ul li ul.sub-menu li.current_page_item { display: block; }

    which would indicate that its in use and displayed as block on that page load?

  3. The “Child Combinator” selector is what you are looking for, try the below CSS.

    .current_page_item > ul { display: block; }

    The only caveat is that “Child combinator” selector will select children only one level deep, so it will not work for nested sub-menu’s.

    HTH

    P.S: I am presuming here that you’ve setup WordPress to apply the “current_page_item” class to the parent menu item that was clicked.

  4. After endless hours I realized that I didn’t use the > correctly and here’s how it ended up looking like:

    #menu ul.menu > li.current_page_item > ul.sub-menu { display: block; }

    Works like a charm! But that’s only for the parents, I cant get the sub-menu items to stay visible when clicked, any ideas?