[Résolu] Balises a et li

Bonjour tout le monde ! Et joyeuses fêtes !
J'ai un petit souci à vous soumettre car j'avoue que je suis très vite dépassé par certaines subtilités de css...
J'ai un menu fait avec des listes et dans ces listes il y a des liens. Jugez plutôt :

<div id="menu">
<ul>
	<li class="bordure_menu">Consultation de la liste...
		<ul>
			<li><a href="#" accesskey="2">... des films</a></li>
			<li><a href="#">... des réalisateurs</a></li>
			<li><a href="#">... des acteurs</a></li>
		</ul>
	</li>
</ul>
</div>

Voici le css :

#menu li li:hover
{
	background-color: white;
	color: black;
}

#menu li li a:hover
{
	color: black;
	background-color: white;
}
/*menu à gauche*/
#menu
{
	width: 22%;
	float:left;
	padding-top:1%;
}

/*pour tous les éléments du menu*/
#menu ul li
{
	color: white;
	margin:5% 5% 0% -16%;
	padding-left:4%;
	font-weight:bold;
	list-style: none;
	background:green;
}

/*pour les sous menus*/
#menu li li
{
	font-weight:normal;
	margin:0% 0% 0% -23%;
	background:black;
}

/*pour les sous menus*/
#menu li a
{
	padding-left:4%;
	padding-right:2%;
	text-decoration:none;
	color:white;
}
.bordure_menu
{
	border:1px solid white;
}

Mon problème est que le lien ne prend pas toute la largeur, autrement dit la balise <a> ne prend pas toute la place de la balise parente <li>, ce que je voudrais. Avec le hover, le fond et le texte ont des couleurs inversées : ça passe de blanc/noir à noir/blanc. Le problème (qui est toujours le même en fait) est que mon fond texte devient noir sur le survol du lien mais uniquement du lien ! Je n'arrive pas à lui dire de devenir noir au survol de toute la balise <li>.

En espérant être clair . Pour une meilleure compréhension voici le lien en ligne (regardez le menu à gauche) : http://dis.univ-lyon2.fr/~rlalande/prog_web/

Merci d'avance pour votre aide et, encore une fois, bonnes fêtes !
Modifié par rom117 (29 Dec 2009 - 20:15)

Bonjour

Remplace le début de ton code CSS par:

#menu li li a { display:block }

#menu li li a:hover { color:black; background-color:white; }

La première ligne permet aux liens de prendre toute la largeur. Par contre, il faut tester pour voir ce que ça donnerait si le texte d'un lien dépassait la largeur (ça passera normalement sur deux lignes, mais il faut tester).

La seconde ligne permet d'inverser les couleurs quand le lien est survolé. Comme il fait toute la largeur (grace à la première ligne), inutile d'utiliser la pseudo-classe "hover" sur "li".

D'ailleurs, il est déconseillé d'utiliser :hover sur d'autres éléments que les liens, cas IE ne l'interprète pas.
Modifié par jiber2fr (29 Dec 2009 - 19:05)

Trop fort jiber2fr ! Ca marche ! Comme je le disais, il me manque encore à acquérir certaines subtilités du css, comme le display:block.

Merci encore et bonnes fêtes à toi .

Résolu !

rom117

Euh... je fais comment pour indiquer que c'est résolu ??

Bonjour,

Tu dois être identifié et aller éditer le premier message du sujet. Tu ajoutes seulement le mot [Résolu] au début du titre.

jiber2fr a écrit :
D'ailleurs, il est déconseillé d'utiliser :hover sur d'autres éléments que les liens, cas IE ne l'interprète pas.

IE6 (et inférieur) uniquement

Comme quoi IE, ce n'est pas si mauvais que ça !