Sous menu qui apparait quand on clique sur le menu principal

bonjour
je cherche à faire un effet de menu identique (ou qui se rapproche beaucoup) du menu principal de ce site :
http://www.ac-nancy-metz.fr/
je parle du menu principal (académie / enseignements / examens ...)

l'idéal serai de pouvoir le faire en full css (pas besoin de compatibilité ie6)
je pense qu'il faut css3 pour l'effet d'animation

j'ai bien tenté de regarder le code source (les codes sources) de la page concernée mais c'est un peu une usine à gaz

bref si vous avez une (des ?) pistes pour reproduire cet effet
déjà au moins pour afficher / cacher les sous-menu
et cerise sur le gâteau : l'effet d'animation lors de l'affichage / cache

merci

Boa en fait en css pur, c'est pas si évident que ca.

Afficher/masquer les sous menus
Le truc, c'est qu'ils sont affichés/masqués au click, pas au survol. Et autant en css il ya le :hover, mais il n'y a pas de :clicked . Il faut donc reproduire une condition sur laquelle tu peux baser ton css affichage/masquage.
La solution avec un peu de js, c'est juste d'ajouter/d'enlever une classe sur tes menus. Sans js, tu peux probablement utiliser le pseudo selecteur :target pour savoir sur quel lien l'utilisateur à cliqué (et donc quel sous menu afficher).
Je l'évoque pour le principe mais c'est assez tordu, je pense qu'il ya moyen de hacker un truc a coup de boutons radio masqués + transformation des liens du menu en label. Essaye plutot le target... ou le js.

L'effet d'animation
C'est plus simple, mais pos tant que ca. L'idée et de mettre un transition sur la hateur de ton menu, de 0 (masqué) à leur hauteur naturelle (auto). Sauf que css ne gère que ls transitions entres valeurs chiffrées, donc auto ne marche pas.
La solution dans ce cas est d'animer non pas le height de l'élément, mais son max-height — de 0 à une valeur ridiculement élevée, genre 999em.
Ca fera l'effet désiré, par contre la durée de transition ne sera pas vraiment juste.

Plan b
A ta place, je le ferais en js (globalement c'est 3 lignes de jquery, pas bien méchant et beaucoup plus maintenable que 2 hacks css combinés. Par défaut je laisserais le menu affiché et le masquerais en js au chargement de la page, comme ca même si pour une raison ou pour une autre ton js ne s’exécute pas les sous menus sont quand même visibles.

bonjour
merci pour ton aide
si je voulais le faire en css c'est pour une raison toute simple : je ne sais pas programmer en js ^^ (je sais je suis nul mais bon, moi et la programmation ça fait trois voir quatre). Du coup à part trouver un js tout fait qui reproduit un effet similaire je ne vois pas trop comment me dépatouiller en js.

Comme le "site" que je fait est en fait une sous partie du site que je met en lien je voulais respecter la charte au mieux afin que l'ensemble soit cohérent. Mais vu le boulot réalisé sur le site ça devient vraiment costaud de suivre.

j'ai essayé de reproduire la page d'accueil du site en local (recopie du code source et téléchargement des feuilles de style et des js) histoire de comprendre comme ils ont fait ça mais ça ne fonctionne pas. C'est de plus une véritable usine à gaz (environ 8 feuilles de style).
Ce que j'appelais un sous menu n'en est pas un véritablement (dans le sens ou ce n'est pas un imbrication
<ul>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>
)
bref je galère déjà pour comprendre l'architecture même de leurs pages, du coup, arriver à comprendre les styles et autres js qui s'y appliquent devient un vrai parcours du combattant.

en tout cas merci pour tes conseils