Affichage ne change pas quand a:hover

Bonjour à tous

J'ai un menu qui est défini notamment avec :
border-bottom-style:solid;

Je souhaite faire disparaître le trait quand la main passe dessus (il y un lien vers # derrière). Je pensais que de définir :
border-bottom-style:none;
Dans le style a:hover associé. Mais rien n'y fait, la bordure reste solidement accrochée

dl#menu dt {
cursor: pointer;
margin: 2px 0 5px;
height: 25px;
line-height: 20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-weight: bold;
border-bottom-style:solid;
background-color:white;
/*background-color:#F4F4FF;*/
}

dl#menu li a:hover, dl#menu dt a:hover {
background-color:white;
border-bottom-style:none;
}

La preuve en images :

http://www.chezwiwi.com/simplitude


En vous remerciant par avance

wiwi

hum, j'avais mal vu

ce que tu vais c'est de transformer la A en display: block; avec des dimensions fixes et tu lui applique un border-bottom: 2px solid #000000;

puis tu définis un :

dt a:hover { border-bottom: 2px solid transparent; }

Modifié par anthony (07 Apr 2005 - 11:47)

heu, une petite question, pourquoi utilises-tu une liste DL/DT/DD au lieu d'une simple liste UL/LI ?

Ce n'est pourtant qu'un simple menu...

Disons que je ne fais qu'utiliser un modèle honteusement repiqué dans ces pages :

http://css.alsacreations.com/xmedia/exemples/deroulant/menu-vertical.htm

Je suis assez novice dans le domaines des css et des balises, donc les subtilités de ces dernières et des différences entre # . et autre m'échappent encore. Mais si il y a plus simple je suis preneur