I was looking for a way to drill down the menu structure in a wordpress widget that shows you all of the navigation pages. Turns out all you need to do is set it up using CSS, as wordpress already outputs all of the information you need to style it. What the widget had to do was show you the current menu level (current_page_item), and only the children directly underneath it. It underlines the page and level that you are on as you click further into the menu tree. As you drill down, it continues to show the children directly underneath it, as well as the current siblings and the current_page_parent level’s siblings. When it reaches the lowest level, it just underlines the page you’re on, as well as showing the current siblings, the parent level above it, and the ancestor levels right up to the top.

The CSS code is as follows (probably not the cleanest but it works) – try it out on a “Pages” widget with just the default settings:

.children,
.current_page_ancestor .children .children,
.current_page_ancestor .children .current_page_ancestor .children .children,
.current_page_parent .children .children,
.current_page_item .children .children,
.current_page_parent .children .children .children
{
display: none;
}

.current_page_item .children,
.current_page_parent .children ,
.current_page_ancestor .children,
.current_page_parent .current_page_item .children,
.current_page_ancestor .children .current_page_ancestor .children,
.current_page_ancestor .children .current_page_parent .children .current_page_item,
.current_page_ancestor .children .current_page_parent .children .current_page_item .children,
.current_page_ancestor .children .current_page_ancestor .children .current_page_parent .children
{
display: block;
}

.current_page_item a{
text-decoration: underline;
}
.current_page_item .children a{
text-decoration: none;
}