Search code examples
csswordpressmenunavigationsubmenu

CSS Navigation that the menu doesn't expand until clicked to that section

I'm trying to create a navigation for Wordpress like the navigation in the link below.

navigation for Wordpress

Basically the navigation doesn't expand. It only shows the sub links if the user is that section. In the link above an example would be the "Service" section. The sub links only display if you click "Service". The client accomplished this in Dreamweaver and using Dreamweaver templates and editable regions, but it doesn't work in Wordpress.

Any help would be greatly appreciated. I have attempted the navigation but the sub links are all displayed like the link below.

http://johnwp.annapolisbook.com/?page_id=6

To everyone that helps, thank you in advance.

Solution

  • Something like this 'should' work (you may need to adjust the selectors):

    .menu ul ul {
    display: none;
}
.menu ul .current_page_item ul, .menu ul .current_page_ancestor ul {
    display: block;
}

    The key here is to hide all the sub menus .menu ul ul and use the .current_page_item on the parent element to show the correct sub menu.