On my website, I am utilizing a WordPress menu in the sidebar. My goal is to have second level child items appear only when a parent menu item is clicked.
You can view an example here:
I managed to use some CSS code to ensure that the Function Space sub items are visible only when you are on the function space page. However, once you navigate to second level pages like the ballroom, those sub menu items disappear 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;
}
My question is how do I make the submenu items visible on both the main top level page and all of its subpages (including ballroom, Tropicana showroom, Grand Exhibition Center, Havana Tower function space, South Tower function space).
Please note that I have sub menus on multiple different pages, so I require the CSS code to be generic for the sidebar menu, not specific to the "meetings-menu" class.