Written with wordpress in mind, but you can adapt as necessary.
Often you have levels of pages. You’ll have top level pages, and some of them have child pages, and some of those child pages have grandchild pages. Usually what you want is for the menu/navigation/sidebar to limit what it’s displaying. You don’t want to see everything, only what’s under where you are now in the hierarchy.
Default case: ONE TWO THREE
Case 2: ONE (current page item) - CHILDA - CHILDB - CHILDC TWO THREE
Case 3: ONE (current page parent, current page ancestor) - CHILDA (current page item) - - GRANDCHILD - CHILDB - CHILDC TWO THREE
Case 4 ONE (current page ancestor) - CHILDA (current page parent) - - GRANDCHILD (current page item) - CHILDB - CHILDC TWO THREE
Alright, so here’s the CSS to make this happen:
#menu ul li ul {
display: none;
}
#menu ul li.current_page_ancestor ul {
display: block;
}
#menu ul li.current_page_ancestor ul li ul {
display: none;
}
#menu ul li.current_page_ancestor ul li.current_page_parent ul {
display: block;
}
#menu ul li.current_page_parent ul li.current_page_item ul {
display: block;
}
#menu ul li.current_page_parent ul li.current_page_item ul li ul {
display: none;
}
#menu ul li.current_page_item ul {
display: block;
}
#menu ul li.current_page_item ul li ul {
display: none;
}