[Résolu] Menu horizontal, oui mais, avec un hover sur les titres

Bonjour à tous
Depuis que j'ai fais connaissance avec ce superbe site, je passe beaucoup de temps à m'exercer. Mais là, j'arrive au terme de ma patience.

Voilà mon cas :
Je crée un menu horizontal comme indiqué dans le tuto voici le lien de ma page test ici
Mais je voudrai qu'au passage de la souris sur les titres (dt), le fond change de couleur.
Je n'y arrive pas. Qui a la solution svp.

Voici la partie de ma feuille css (on ne rigole pas, je débute )

a écrit :
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background: url(bg.gif) ;
font: 80% myriad web pro;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(bg_menu.gif) repeat-x 0 -25px ;
list-style-type: none ;
}
#menu dl {
float: left;
width: 12em;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover {
background: url(bg_menu.gif) repeat-x 0 0 ; /* couleur passage souris sur sous-titre */
color: #fff ;
font-weight: bold ;
}
#menu dt /*menu de base des titres sans passage */ {
cursor: pointer;
height: 25px ;
line-height: 25px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
text-align: center;
font-weight: bold;
background: url(bg_menu.gif) ; /*fond menu de base des titres sans passage */
display: block ;
border-right: 2px solid #dea ;
}
#menu li dt a:hover {
background: url(bg_menu.gif) ; /* couleur passage souris sur sous-titre */
color: #fff ;
font-weight: bold ;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
-->
</style>

A vous les studios
Modifié par maiffret (23 Jan 2007 - 15:46)

J'envisage 4 possibilités pour expliquer les non-réponses.
1/ c'est déjà le week-end
2/ Je n'ai pas choisi le bon topic
3/ j'ai dit une connerie ( mais je pense que j'aurai des remarques)
4/ mon cas de figure est complexe

A votre Dispo

5/ posté il y'a moins d'une heure
6/ les membres du forum ne sont que des bénévoles comme toi

Il faut parfois faire montre de patience

Bonjour,
Il faudrai un lien dans tes balises dt :

<dt onmouseover="javascript:montre('smenu1');"><a href="lien_vers_page_du_menu1" >Menu 1</a></dt>

et le CSS :

#menu dt a:hover {
background-image: url(bg_menu.gif) ; /* couleur passage souris sur sous-titre */
color: #fff ;
/* font-weight: bold ; à éviter */
}

Modifié par chmel (20 Jan 2007 - 15:27)

Bonjour et bonne semaine à tous
Merci pour ta réponse chmel, je commençai à ne plus y croire

Ca ne marche pas avec tes liens ci-dessus.


C'est un menu comme celui-ci que j'aimerai.

A ta dispo

Ok

En fait ça marche avec tes liens, chmel

Merci beaucoup

La balise dans le css, je l'avais trouvé mais celle dans le dt de l'html, non.
Je ne connaissai pas.

Comment fermer ce sujet ?

Bonjour,

Ta question m'intéressait aussi (pour le menu).

Pour un fois que je peux répondre : pour fermer le sujet : mettre [résolu] devant le titre de ta question.