Petite question pour sous-menu PHP/Script

Bonjour,

J'aurai une question svp.
J'ai crée un menu avec un sous-menu
Accueil
Prestations
Photos
Cafés
Restaurants
Bars
Comités
Soirées
Contact

Jusque-là, aucun souci, seulement, lorsque je clique sur le menu Photos, le sous-menu s'affiche, mais j'aimerai faire en sorte que lorsque je reclique sur le menu Photos, le sous-menu s'enlève. Hors, il reste afficher. J'espère avoir été claire dans mon explication. Merci beaucoup à ceux ou celles qui voudront bien m'adier.

Voici mon code :

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("gauche").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

<div id="gauche">
<ul>
<li><a href="index.html" class="Style2">¤ Accueil</a></li>
<li><a href="prestations.html">¤ Prestations</a></li>
<li><a href="photos.html">¤ Photos</a>
<ul>
<li> <a href="cafes.html" class="Style4">Cafés</a> </li>
<li> <a href="comites.html" class="Style4">Comités</a> </li>
<li> <a href="mariages.html" class="Style4">Mariages</a> </li>
<li> <a href="anniversaires.html" class="Style4">Anniversaires</a> </li>
<li> <a href="autres.html" class="Style4">Autres</a> </li>
</ul>
</li>
<li><a href="soirees.html">¤ Soirées</a></li>
<li><a href="contact.html">¤ Contact</a></li>