Menu responsive en HTML

Salut, quelle tentative avez vous faites? Je n'en voit aucune sur votre code.

Vous pouvez commencer par supprimmer toutes les valeurs de mise en page(CSS) qui utilisent des valeurs absolues(une valeur en pixel par exemple) pour les remplacer par leur équivalent en unités relatives comme les % ou em(1em correspond à la hauteur d'une ligne de texte normale, 2em est donc le double de la taille, 0.5em correspond à 50% de la taille d'affichage de base).

Ensuite vous pouvez allez voir du côté des media queries en CSS pour indiquer plusieurs mises en pages selon les différnetes tailles des écrans(donc créer des régles spécifiques selon des limites de dimensions hauteur et/ou largeur).

Une bonne façon de faire est de créer avant tout votre site pour un affichage sur mobile(résolution d'écran plus petite) puis de faire ensuite la version pour écran de bureau. Vous pouvez d'ailleurs tester dans la console du navigateur vous aurez l'option pour voir l'affichage sur smartphone.

Plus que ma réponse non exhaustive(il existe d'autres possibilités comme des framework, le plus connu étant Bootstrap) utilisez votre moteur de recherche préféré pour trouver des informations complétes et détaillées sur le web responsive aussi appellé web adaptative ainsi que des cours pratiques.