Submenu open na klik

Hi!

Ik heb een CSS voor mijn page-menu in de sidebar; daarbij wordt bij een hover de sub geopend door de onderliggende hoofditems naar onderen te schuiven.

Ik wil dat dit pas gebeurt nadat ik op die knop heb geklikt, maar ook dat het submenu open blijft staan tot ik met een ander hoofditem verder ga.
Graag zou ik ook een > willen plaatsen bij Hoofditems die subitems bevatten.

Iemand een idee???

Dit is het stukje code in de sidebar:

<div id="ParentTabs" class="TabList">
   <ul class="Level0">
      <?php wp_list_pages('title_li=' ); ?>
   </ul>
</div>

Dit is mijn CSS tot nu toe:

/**/
#ParentTabs{
float:left;
color:#831930;
width:231px;
margin-left:50px;
margin-top:25px;
border-top:1px solid #FFF;
}
#ParentTabs ul {
}
#ParentTabs li {
font-size: 16px;
font-weight:bold;
border-bottom:1px solid #fff;
}
#ParentTabs li ul { /* second-level lists */
display:none;
}
#ParentTabs li ul  a:active{ /* second-level lists */
}
#ParentTabs li ul li {
   font-size      : 16px;
   color         : #FFFFFF;
   text-decoration   : none;
   margin-right   : 0px
}
#ParentTabs a {
   text-decoration   : none;
   text-align      : left;
}
#ParentTabs li li a {

}
#ParentTabs li a:hover {
   background-color: none;
}
#ParentTabs li ul li a:hover {
   background-color: #f7be87;
}
#ParentTabs li a.SelectedTab {
   font-size      : 1.12em;
   background-color: #FFF;
}
#ParentTabs .DisabledTab {
   color         : #ccc;
}
/* no need to change these hover classes
unless you need more than 4 levels */
#ParentTabs li:hover ul ul,
#ParentTabs li:hover ul ul ul,
#ParentTabs li:hover ul ul ul ul,
#ParentTabs li.iehover ul ul,
#ParentTabs li.iehover ul ul ul,
#ParentTabs li.iehover ul ul ul ul{
display:none;
}
#ParentTabs li:hover ul,
#ParentTabs li.iehover ul {
display:block;
}
#ParentTabs li li:hover ul,
#ParentTabs li li li:hover ul,
#ParentTabs li li.iehover ul,
#ParentTabs li li li.iehover ul {

}
/**/