There are lots of snippets on the web for creating folding menus using css and/or javascript, but I couldn’t find anything that works with the standard wp_list_pages markup and deals properly with current pages and parent signalling. The css below uses the ‘current’ classes to show child pages when appropriate.

/* menu CSS */
 #menu,
 #menu ul {
 margin:0;
 padding:0;
 list-style:none;
 }
/* parent */
 #menu li {
 display:block;
 margin:0;
 padding:0;
 margin-top:1px;
 }
 #menu li a {
 display:block;
 padding:2px 5px;
 color:#000;
 background:#bbbbbd;
 text-decoration:none;
 }
 #menu li a:hover,
 #menu li a:focus,
 #menu li.current_page_item a,
 #menu li.current_page_ancestor a {
 background:#ccccce;
 padding-left:10px;
 }
/* child */
 #menu li ul li {
 display: none;
 }
 #menu li.current_page_item ul li, 
 #menu li.current_page_ancestor ul li {
 display: block;
 }
 #menu li ul li a {
 background:#ccccce;
 padding-left:10px;
 }
 /* grandchild */
 #menu li.current_page_item ul li ul li,
 #menu li.current_page_parent ul li ul li {
 display: none;
 }
 #menu li ul li.current_page_item ul li {
 display: block;
 }
 #menu li ul li a {
 font-size:0.9em;
 background:#dddddf;
 padding-left:20px !important;
 }
 /* great-grandchild */
 #menu li ul li ul li a {
 font-size:0.8em;
 background:#dddddf;
 padding-left:30px !important;
 }
 #menu li ul li.current_page_item a,
 #menu li ul li a:hover {
 background:#eeeeef
 }