Bonjour
Hansou !
La solution la plus simple est d'affecter la couleur de fond à l'élément qui englobe ce que tu survole.
Actuellement, tu applique la couleur de fond à ton lien. Or ton lien ne s'étend pas à ton sous-menu (sinon ça ne servirait à rien d'avoir un sous-menu...).
En revanche, la balise
<li>
qui contient ton lien contient également ton sous-menu. Si tu survole le sous-menu, tu survole toujours ta puce, donc c'est à cet élément qu'il faut appliquer ton background.
Concrètement :
- change le premier sélecteur
#menu a:hover
par #menu li:hover
- retire la propriété
background-color : rgb(123, 143, 56);
du sélecteur #menu a
et place-le dans #menu li
Le truc en plus
Pour info, tu peux simplifier/optimiser ton CSS en remplaçant tes
margin: 0px 0px 0px 0px;
par
margin: 0;
et la même pour
padding
.
En fait, quand la taille vaut 0, il est inutile de préciser l'unité (ça vaut 0 dans toutes les unités).
De plus, si les 4 marges sont identiques, utiliser la version contractée t'économisera du texte inutile
Il me semble que c'est la méthode la plus rapide pour faire ce que tu souhaites