wordpress submenu css show on parent active and child active

0
votes

I am using a WordPress menu in a sidebar on my website. I want to have second level child items on my site that only show up when the parent menu item is selected.

http://tropicana.net/dev2014/meetings/function-space/

I was able to use this css to make the Function Space sub items only show up when you're on the function space page. However, when you go to the second level pages (such as the ballroom) those sub menu items go away again. 

div.custom-sidebar .menu li ul {
     display:none;
}

div.custom-sidebar .menu li.current_page_item > ul,
.menu li.current-menu-item > ul {
     display:block;
}

How do I make the submenu items show up on both the top level page when its active, and on all the sub menu pages as well (the ballroom, tropicana showroom, grand exhibition center, havana tower function space, south tower function space)

Note: i have sub menus on several differnt pages, so I need the css to be generic to the sidebar menu, not "meetings-menu" class.

1
csswordpresssubmenu

1 Answers

0
votes

Add .current-menu-ancestor to the current menu item selectors, as follows:

div.custom-sidebar .menu li.current_page_item > ul, 
div.custom-sidebar .menu li.current-menu-ancestor > ul, 
.menu li.current-menu-item > ul, 
.menu li.current-menu-ancestor > ul {display:block;}