:hover sur un <a> avec prise en compte de la largeur du <li&a

Bonjour,

Voici la situation :
J'ai un sous-menu vertical formé par des <li>, contenant des <a>.

En CSS, je cherche à savoir comment effectuer un :hover sur un <li> pour que le fond (largeur total du <li>) et le texte (contenu dans le <a>) changent de couleur en même temps.

Je sais que l'on peut faire des :hover sur des <li> et des <a>, mais quand on passe le curseur, on a le fond qui change de couleur, puis seulement après le texte car le curseur finit par arriver dessus. J'aimerais que ça soit les deux en même temps.

D'une autre manière, en mettant le background sur le <a>, j'arrive à avoir le fond et le texte qui se changent en même temps, mais cette fois c'est la largeur qui ne me convient pas. Elle ne correspond pas à la largeur du <li>. J'imagine que le <a> peut hériter de la largeur du <li>, mais je n'y arrive pas.

Je remercie par avance la ou les personnes qui voudrait(en)t bien m'aider.
Bien à vous,
Modifié par hlcgperso (30 Aug 2016 - 18:59)

Bonsoir !

hlcgperso a écrit :

D'une autre manière, en mettant le background sur le <a>, j'arrive à avoir le fond et le texte qui se changent en même temps, mais cette fois c'est la largeur qui ne me convient pas. Elle ne correspond pas à la largeur du <li>. J'imagine que le <a> peut hériter de la largeur du <li>, mais je n'y arrive pas.

Mettre un display : block sur les 'a' ?


Modifié par Zelena (30 Aug 2016 - 19:11)

Bravo, merci beaucoup. ça marche.

Il faut que je bidouille encore pour que le <li> soit de la même largeur que le <ul> et ça sera nickel. Pour le moment j'ai des marges blanches à gauche et à droite.

merci encore