Create collapsing sub-menus with CSS & WordPress 3.0

CSS, Javascript, Tumblr, WordPress December 16, 2010

Nice and clean solution from Dalton Rooney to get your sub-menu list items hidden if the parent item is not clicked:

.widget_nav_menu ul.sub-menu {
display: none;
}
.widget_nav_menu .current_page_parent ul.sub-menu {
display: block;
}
.widget_nav_menu .current_page_ancestor ul.sub-menu {
display: block;
}
.widget_nav_menu li.current-menu-item ul.sub-menu {
display: block;
}
.widget_nav_menu ul.sub-menu li.current-menu-item ul.sub-menu {
display: block;
}
.widget_nav_menu ul.sub-menu ul.sub-menu {
display: none;
}
.widget_nav_menu ul.sub-menu li.current_page_ancestor ul.sub-menu {
display: block;
}
.widget_nav_menu li.current-menu-item a {
color: #222222;
}
.widget_nav_menu li.current-menu-item ul.sub-menu a {
color: #666666;
}

On the WordPress Forums CSD-Images suggest tying it in with a Suckerfish menu like this:

'wp_nav_menu( array(
'theme_location' => 'main-nav',
'menu' => 'main-nav',
'container' => 'div',
'container_class' => 'header-nav',
'menu_class' => 'sf-menu'
)); '

This calls the menu I’ve defined in the Functions file and assigns the container a class of header-nav and the menu class sf-menu

All I had to then is customise the Suckerfish CSS to my styles.