Menu cliqué

Bonjour, j'ai crée un menu avec les parametres CSS ci-dessous

j'aimerai que le texte (voir mes balises SPAN) reste afficher lorsque je clique sur un menu et qu'il disparaisse lorsque je survol un autre menu.
Pour le moment, seul le survol fonctionne

merci pour votre aide

<style type="text/css">
.1#img {
 position: absolute;
 display: block;
 margin-left: -910px; 
 margin-top: -63px;
 width: 400px ;
 height: 127px ;
}
.bloc1 {
 position: absolute;
 display: block;
 color: #ACA418;
 font-family: Bickley Script Plain;
font-size: 50px;
 margin-left: 550px; 
 margin-top: 0px;
}

.bloc2 {
 position: absolute;
 display: block;
 color: #CC0000;
 font-family: Bickley Script Plain;
font-size: 140px;
 margin-left: 60px; 
 margin-top: -60px;
}

#menu {
	height: 70px;
	background: url(bandeauMenu1.png) left top no-repeat;
}
#menu ul, #menu li {
	margin:0;
	padding: 0;
	list-style-type: none;
	}
#menu ul {
	position: absolute;
	height: 70px;
	width: 666px;
}

#menu a:hover span {   /* définition de la balise <span> au survol */
display: block;
position: absolute;
top: 15px;
left:650px;
width: 300px;       /* largeur de la zone de commentaires, selon la taille du menu */
text-align: center;
color: #FFFFFF;
font-family: Bickley Script Plain;
font-size: 45px;
}
#menu a span {     /* définition de la balise <span> inclue dans <a> */
display: none;
}
#menu li {
float: left;
}
#menu li a { 
display: block;  
height: 70px;
width: 111px;
color: #769712;
text-decoration: none;
text-align: center;
}

#menu a:hover {
color: #fff;
background: transparent url(images/bandeauMenu1.png) top left no-repeat;
}

#menu a#menu1, #menu a#menu2, #menu a#menu3, #menu a#menu4, #menu a#menu5, #menu a#menu6 {
display: block;
width: 111px;
}


#menu a:hover#menu1 {
background-position: 0px -70px;
}
#menu a:hover#menu2 {
background-position: -111px -70px;
}
#menu a:hover#menu3 {
background-position: -222px -70px;
}
#menu a:hover#menu4 {
background-position: -333px -70px;
}
#menu a:hover#menu5 {
background-position: -444px -70px;
}
#menu a:hover#menu6 {
background-position: -555px -70px;
}

dans mon BODY

j'ai le code HTML suivant :

	<li><a id="menu1" href=""><span>Huile d'olives</span></a></li>
		<li><a id="menu2" href=""><span>Tapas & conserves</span></a></li>
		<li><a id="menu3" href=""><span>Charcuterie</span></a></li>
		<li><a id="menu4" href=""><span>Vins fins</span></a></li>
		<li><a id="menu5" href=""><span>Epicerie divers</span></a></li>
		<li><a id="menu6" href=""><span>Produits de beauté</span></a></li>