28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Etant débutant en CSS, et en creation web en géneral, je rencontre un probleme.

Je souhaite créer un menu déroulant pour un site web (qui n'a pas vocation à etre mis en ligne, c'est juste de l'apprentissage). J'ai donc trouver sur internet un script correspondant au menu déroulant recherché.
Cependant je rencontre un probleme au niveau du background. En effet, j'ai réussi à modifier le background lorsque le curseur passe dessus, mais je voudrais maintenant que le background des sous menu soit de couleur differente (par rapport au bouton principal non survolé.
Actuelement j'ai une image comme background et celle ci s'applique pour le bouton "non survolé" et les sous menus (les menus qui apparaissent quand le bouton principal est survolé). Je voudrais donc avoir l'image pour le bouton "non survolé" et un autre image pour les sous menus. Mais je ne vois pas comment effectué ce changement.
J'espere que c'est compréhensible. Je mets le script ci dessous.

Je vous remercie d'avance de votre aide.

Script css:
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
);
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
background-image:url(Bouton-test.gif);

}
#menu ul li a:hover {
background-image:url(TEST-BOUTON-SURVOLE.gif);
font-weight:bold;
color:#000;

}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
----------------------------------------------------------
Cela ressemble furieusement à un code que je connais ça Smiley cligne

Il suffit de rajouter le background à #menu li:hover ul li

#menu li:hover ul li 
{
float:none;
background:couleur url();
}

Modifié par Mammouth (22 Dec 2010 - 19:10)
Bonjour,

Tout d'abord, merci pour votre réponse.

Malheureusement, cela ne fonctionne pas. Je vais mettre des images pour mieux expliquer ma requête.

En 1, vous avez donc le bouton du menu non survolé
http://img202.imageshack.us/img202/8778/menu1y.png

En 2, les sous titres qui apparaissent lorsque le bouton principal est survolé. Je voudrais donc modifier le background de ces sous menu (lorsqu'ils ne sont pas survolés).
http://img576.imageshack.us/img576/1890/menu2m.png


D'avance merci
Votre background-image:url(Bouton-test.gif);, ne le déclarez pas dans #menu li a, mais dans #menu li, à la place du background-color:black du tuto initial.
Puis rajoutez le code comme je vous l'ai indiqué ci-dessus.
Modifié par Mammouth (22 Dec 2010 - 20:51)