Vertical expandable WordPress menu

In the default WordPress theme if you apply the Pages widget you get a multi-level menu which is pretty cool but as you might notice the menu is fully open from the first element to the very end of the list showing all the parent an children items.

What i'm going to show you is how to make all the other sub-items disappear and show only the sub-items of the currently active parent menu item.

Just add these three entries to your css file:

.widget_pages ul ul li{
  display:none;
}
.widget_pages ul li.current_page_item ul li{
  display:block;
}
.widget_pages ul li.current_page_parent ul li{
  display:block;
}