Organigramme dynamique

hi ! je souhaite transformer mon organigramme basique en dynamique, c'est à dire qu'au lieu de tout afficher je veux qu'il me cache tout ce qui est au 3eme niveau

<li><a href="">Page 1</a>
				<ul>
					<li><a href="">Sous page1</a></li>
					<li><a href="">Sous page2</a>
						<ul>
							<li><a href="">sous sous pages1</a></li>
							<li><a href="">sous sous page2</a></li>
						</ul>
					</li>
					<li><a href="">Sous page 3</a></li					
				</ul>
			</li>

Je suppose que je vais ajouter à chaque < a href> onClick()
mais je n'y arrive pas :s
need your help !!

merci ^^

en css, fait un display: none; sur le ul de 3eme niveau

et un li:hover ul {
display:block;
}

sur le 2eme niveau de li

il manque le premier ul de ton menu, donc ce que je t'ai mis comme code css est incomplet, à modifier avec l'arbo complète du menu.

Voila le début de mon organigramme sur l'exemple précédemment trouvé.

<ul id="primaryNav" class="col6">
			<li id="home"><a href="">Accueil</a></li>
			<li><a href="">Page interne</a>
				<ul>
					<li><a href="/Pages Internes/">H&S</a></li>
					<li><a href="/Pages Internes/">Carnot_Mib</a>
						<ul>
							<li><a href="/Pages Internes/Carnot_Mib/">Actualités</a></li>
							<li><a href="/Pages Internes/Carnot_Mib/">Groupe tic-mnt</a></li>
							<li><a href="/Pages Internes/Carnot_Mib/">Appels & Projets</a></li>
						</ul>
					</li>
					<li><a href="/Pages Internes/">Extensions IMS</a></li>
					<li><a href="/Pages Internes/">Forum</a></li>					
				</ul>
			</li>
			<li><a href="">Les Services</a>
				<ul>
					<li><a href="/services/">Service Financier</a>
						<ul>
							<li><a href="/services/financier/">Contrats</a></li>
							<li><a href="/services/financier/">Dépenses</a></li>
							<li><a href="/services/financier/">Inventaire</a></li>
							<li><a href="/services/financier/">Fiche de cout d'un contrat</a></li>
							<li><a href="/services/financier/">Colloques</a></li>
							<li><a href="/services/financier/">Demande d'achats</a></li>
						</ul>
					</li>
					<li><a href="/services/">Contrat de recherche</a></li>
					<li><a href="/services/">Misions</a></li>
					<li><a href="/services/">Ressources humaines</a></li>
					<li><a href="/services/">Reseau</a></li>
					<li><a href="/services/">Secrétaire de groupes</a></li>
					<li><a href="/services/">Informatique</a>
						<ul>
							<li><a href="/services/informatique/">Intégrations Financier</a></li>
							<li><a href="/services/informatique/">Intérations publications</a></li>
							<li><a href="/services/informatique/">Administration système</a></li>
							<li><a href="/services/informatique/">Administration WIFI BDX1</a></li>
						</ul>
					</li>
				</ul>
			</li>

Comme on le voit il commence à l'accueil avec un premier "menu", qui contiennent d'autres menu. Ici je descend jusque trois niveaux.
Et c'est seulement le troisième niveau que je veux cacher comme un contenu un contenu dans un dossier et le faire apparaitre et disparaitre à partir d'un clic

J'espère être clair

J'ai réussi à faire ta technique sauf que çà ouvre tout au passage de la souris, mais tout même ce qui ne concerne pas la où je place mon curseur.

Pour que cela se fasse au clic de la souris vous avez une solution ?

avec du JS je commence à me rapprocher de mon idée :

<script type="text/javascript"> 
function secret(secretId) 
{ 
  if(document.getElementById) { 
    secret = document.getElementById(secretId); 
    if(secret.style.display =="none") { 
      secret.style.display =""; 
    } else { 
      secret.style.display ="none"; 
    } 
  } 
} 
</script> 

   <ul id="primaryNav" class="col6">
			<li id="home"><a href="">Accueil</a></li>
			<li><a href="" onclick="global:secret('cache');return false;">Page interne</a>
				<ul>
					<div id="cache" style="display : none; "> 
					<li><a href="">H&S</a></li>
					<li><a href="" onclick="global:secret('carnot');return false;">Carnot_Mib</a>
						<ul>
							<div id="carnot" style="display : none; "> 
							<li><a href="">Actualités</a></li>
							<li><a href="">Groupe tic-mnt</a></li>
							<li><a href="">Appels & Projets</a></li>
							</div>
						</ul>
					</li>
					<li><a href="">Extensions IMS</a></li>
					<li><a href="">Forum</a></li>			
					</div>
				</ul>
				
			</li>

Le deuxième et troisième niveau sont cachés, lorsque je clique sur "Page interne" il affiche entièrement le second niveau (enfin une victoire !) mais la joie fut de courte durée lorsque j'ai appliqué la même méthode pour le 3ème niveau, tout disparais -_-
Je comprend un peu ... mon second niveau n'est plu visible vu que je ne lui dis plus d'être toujours visible, je dis seulement troisième niveau apparait !!

Une idée ??