Hide and show menu subpages

by

I think you’re asking how to make a menu with drop downs clickable rather than hoverable, so here’s a very simple example of what I think you want: http://jsfiddle.net/pk5Bx/

HTML

<div id="navigation">
    <ul>
        <li class="current_page_parent"><a href="#">Top level 1</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
            </ul>
        </li>
        <li class="current_page_parent"><a href="#">Top level 2</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
            </ul>
        </li>
    </ul> 
</div>​​​​​

Javascript/jQuery

 $(function() {
     $("#navigation .current_page_parent").click(function(){
         $(this).children('ul').toggle();
     })
 });​

CSS

#navigation ul li {
    display: inline-block;
}    
#navigation ul ul {
    display: none;
}​

EDIT

Using similar HTML that wp_list_pages() outputs.