function hideOnLoad(){
for (var i = 1 ; i <= 4 ; i++) {
		document.getElementById('menu'+i).style.display='none';
		document.getElementById('smenu'+i).style.display='none';
		}
}
/* au chargement de la page (windows.onload) on appelle la fonction hideOnLoad(); qui va cacher tous les sous menus, en effet par défaut les sous menus (<dd>) sont visibles, et tant mieux, car pour le webnaute qui désactive le javascript dans son navigateur, il serait fort peu pratique de ne pas pouvoir accéder aux menus !
Donc à ce point du script, nous avons caché les sous menus au chargement de la page. Très bien, mais il faut maintenant permettre au webnaute de naviguer sur votre site. La fonction display(); va s'en charger à merveille, voyons comment elle fonctionne. */

/*function display(id) {
	var d = document.getElementById(id);
	if (d.style.display != 'none') {
		d.style.display = 'none';
	}
	else {
		for (var i = 1 ; i <= 4 ; i++) {
		document.getElementById('menu'+i).style.display='none';
		document.getElementById('smenu'+i).style.display='none';
		}
	d.style.display = 'block';
	}
}*/
/*On test si le display (propriété css) de l'élément ayant pour id, "id" ("id" est ce qui est inscrit entre parenthèses lors de l'appel de la fonction dans le code xhtml => smenuX).
Si le display est différent de none (!= 'none') on donne la valeur none au display de l'id concerné, sinon on cache tous les sous menus en définissant le display à none pour chaque id, et on n'affiche que l'id concerné. Voilà ce n'est pas si compliqué que ça ! */
	
function display(id) {
	var d = document.getElementById(id);
	if (d.style.display != 'none' && d.style.display != '') {
		d.style.display = 'none';
	}
	else {
		for (var i = 1 ; i <= 6 ; i++) {
		document.getElementById('smenu'+i).style.display='none';
		}
	d.style.display = 'block';
	}
	event.cancelBubble = true;
}