Soucis avec différents style pour les liens

bonjour,

je souhaite utiliser deux styles pour mes liens, un pour mon menu et un pour les autres liens.
voici mon code menu :

a  {
text-decoration: none;
	color: #000000;
	}
	
a:hover {  
	text-decoration: underline; 
	color: #000000;
		}
		
#liensMenu a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
	padding-left : 8px;
	padding-right : 8px;
	text-decoration:none;
}

#liensMenu a:hover{
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFCC66;
	padding-left : 8px;
	padding-right : 8px;
}

<div id="menu">
	<span id="liensMenu"><a href="index.php" >Accueil&nbsp;</a></span>
<span class="Style1">-</span><span id="liensMenu"><a href="stats.php">Statistiques</a></span> 
<span class="Style1">-</span>
<span id="liensMenu"><a href="liens.php" >Liens / visuels </a>
<a href="conditions.php" >Conditions</a></span>
<span class="Style1">-</span><span id="liensMenu"><a href="aide.php">Aide</a></span><span class="Style1">-</span>
<span id="liensMenu"><a href="contact.php" >Contact</a></span>
<span class="Style1">-</span>
<span id="liensMenu"><a href="logout.php" >D&eacute;connexion</a></span></div>

Le problème est que si j'ajoute : border-bottom : #125121 1px solid; sur mon a:hover, il va aussi se mettre sur mon #liensMenu a:hover. Comment ça se fait ?

Merci de votre aide
Modifié par maysa (20 Nov 2007 - 13:51)

sur #lienmenu tu dois lui indiquer border:none

Salut maysa ,

lorsque tu utilises a:hover { des déclarations } tu cibles toutes les balises <a> du document. Donc si aucune déclaration plus spécifique (dans #liensMenu a:hover{ ... } par exemple) ne vient contredire ce qui a été défini de manière globale ce sera pris en compte.

Pour faire ce que tu veux, tu peux rajouter :

#liensMenu a:hover{
	border-bottom : none;
}

Un peu de lecture : Les sélecteurs et Cascade CSS et priorité des sélecteurs.

A+

merci je vais essayer ça...