Le plus simple est de faire une div qui contient un titre h3 et la liste <ul>
Dans un second temps nous créons une classe "ouvert" et une classe "ferme", avec des hauteurs différentes (voir code dans head). Nous attribuons au div la classe "ferme" pour commencer. La liste est donc invisible, car la hauteur de la div est de 22pixels pour laisser y voir le h3, et overflow: hidden ("ce qui dépasse: caché"), ce qui correspond à la hauteur du h3. (Si nous voulons vérifier, enlevons la mention "overflow: hidden" de l'instruction de style. Le contenu de ce qui dépasse ne sera plus caché).
Puis nous utilisons 2 "mouse events" dans la balise div. Les événement de souris: souris entrant, souris sortant, déclenchent pour la div ("this") un changement de classe entre ferme et ouvert.
On pourra ajouter une transition css sur la hauteur dans les deux classes, pour que le mouvement soit plus souple.