how to hide submenus for the not active pages

Question

I would like to expand only the active part of the sidebar menu and hide the parts which have nothing to do with the actual selection. Just like how its done on every Explorer like file manager, or how it is with accordion menus.

In the default TwentyTen theme, this is the class definition for the active submenu:

menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor

and this is the one for a non-active submenu:

menu-item menu-item-type-post_type menu-item-object-page

So I'm thinking about using something like:

li .menu-item ul .sub-menu { display: none; }
li .current-menu-parent ul .sub-menu { display: inherit; }

Would something like this work? It must be a fairly common problem, but I have not found a single solution with Google.

To have an idea why it’s important to make the menu smaller, here is the site I'm working on where the menu is overly complicated: http://kek.org.hu/kozossegikertek

Answer 1

I use just such a menu in my Oenology Theme. Feel free to use the sidebar menu CSS to suit your needs! Rather than try to post it all here, I'll just link to the Oenology GitHub repository.

EDIT:

Here's where the sidebar navigation menu style definitions start.

Answer 2

Based on Chip Bennett's answer here is the solution I ended up using. I recommend it for someone looking for how to hide a sub-menu of a two-level menu:

.widget_nav_menu li.menu-item ul.sub-menu {
    display: none;
}

.widget_nav_menu li.current-menu-item ul.sub-menu ,
.widget_nav_menu li.current-menu-ancestor ul.sub-menu {
    display: inherit;
}