Menu CSS Vertical deroulant au clic

Coucou tout le monde !
J'ai un petit problème au niveau d'un menu vertical en CSS/XHTML que je veux installer sur mon site.
En fait il marche bien mais il se déroule au passage de la souris alors que je souhaiterait que se soit lors du clic.
J'ai déjà essayé avec la fonction :active mais les sous menus disparaissent dés que l'on relâche le clic.

Le menu et sur cette page : http://lesbombers.free.fr/menu/menuHover.html

Voici son code CSS :

#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:0px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(menuvertical/boutton1.gif) no-repeat;}

#menu li.sub {background:#fff url(menuvertical/boutton1.gif) no-repeat;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}

#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#menu :hover {color:#fff; background:#fff url(menuvertical/boutton2.gif) no-repeat; z-index:500; white-space:nowrap;}

#menu :hover > a {color:#fff; background:#fff url(menuvertical/boutton2.gif) no-repeat; z-index:500; white-space:nowrap;}

#menu :hover ul {position:static; height:0px; margin-top:-1px; background:#000;}
#menu :hover ul {position:static; height:0px; margin-top:-1px; background:#000;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #fff;}

#menu :hover ul li, #menu :hover ul li a {background:#000; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #000 url(menuvertical/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#D74A4A; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}
#menu :hover ul li.fly:hover > a {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}

#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#000;}
#menu :hover ul :hover ul :hover ul li {background:#000; z-index:500;}

#menu :hover ul :hover ul li.fly a {background: #000 url(menuvertical/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#D74A4A; color:#fff;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}
#menu :hover ul :hover ul li.fly:hover > a {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}

#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#000;}

#menu :hover ul :hover ul :hover ul :hover {background:#D74A4A; color:#fff;}
#menu :hover ul :hover ul :hover ul :hover a {color:#fff;}

Merci d'avance pour votre aide