Menu CSS

Salut
Je cherche une solution par n'importe quel moyen sauf du flash à moins qu'on m'explique comment faire

Problème posé:

J'ai réalisé un menu en CSS avec 2 états plus celui au repos. J'aimerai rajouter des sous menus à la base de l'image (en blanc)
Mais le gros soucis, c'est qu'on ne peu mettre deux backgrounds à la fois dans un style, car dans ce cas il existe deja un style définit et j'aimerai qu'il agisse en même temps.

J'ai cherché aussi s'il existe des solutions comme superposer deux "li" mais sans succès...

Voici le CSS :

<style type="text/css">

body {
	background:#669999;
	background-image: url(images/ecole_13.jpg);
	background-repeat:repeat-x;
	height: 512px;
}
.logo {
	background-image:url(images/logo_05_14.jpg);
	background-repeat:no-repeat;
	width: 289px;
	height: 45px;
	position: absolute;
	margin-left: 360px;
}
.contener {
	width: 665px;
	height: 300px;
	margin:auto;
	position: relative;
	margin-top: 15px;
}
ul#menu {
	margin:0;
	vertical-align:bottom;
}
ul#menu li {
	display:block;
	float:left;
	height: 218px;
	margin:0;
	
}
ul#menu a {
	display:block;
	height:218px;
	text-decoration:none;
	list-style-type: none;
}


/* menu liens */


ul#menu li#menu_ecole {
	width: 119px;
	height: 218px;
	background-image:url(images/ecole_05.jpg);
	background-repeat:no-repeat;
	text-align:center;
	vertical-align:bottom;
	list-style-type: none;
}
ul#menu li#menu_etudes {
	width: 117px;
	height: 218px;
	background-image:url(images/ecole_08.jpg);
	background-repeat:no-repeat;

}
ul#menu li#menu_realisations {
	width: 119px;
	height: 218px;
	background-image: url(images/ecole_09.jpg);
	background-repeat: no-repeat;
}
ul#menu li#menu_enseignants	{
	width: 121px;
	height: 218px;
	background-image:url(images/ecole_10.jpg);
	background-repeat:no-repeat;
}
ul#menu li#menu_joindre	{
	width:145px;
	height: 218px;
	background-image:url(images/ecole_11.jpg);
	background-repeat: no-repeat;

}


/* menu survolée */


ul#menu li#menu_ecole a:hover {
	background-image:url(images/ecole_05visited.jpg);
	background-repeat:no-repeat;
	height: 218px;
	list-style-type: none;
}
ul#menu li#menu_etudes a:hover {
	background-image:url(images/ecole_08visited.jpg);
	background-repeat:no-repeat;
	height: 218px;
	list-style-type: none;
}
ul#menu li#menu_realisations a:hover {
	background-image: url(images/ecole_09visited.jpg);
	background-repeat: no-repeat;
	height: 218px;
	list-style-type: none;
}
ul#menu li#menu_enseignants a:hover {
	background-image: url(images/ecole_10visited.jpg);
	background-repeat: no-repeat;
	height: 218px;
	list-style-type: none;
}
ul#menu li#menu_joindre a:hover {
	background-image: url(images/ecole_11visited.jpg);
	background-repeat: no-repeat;
	height: 218px;
	list-style-type: none;
}


/* menu actif */


ul#menu li#menu_ecole a:active  {
	background-image: url(images/ecole_05actif.jpg);
	background-repeat: no-repeat;
}
ul#menu li#menu_etudes a:active {
	background-image: url(images/ecole_08actif.jpg);
	background-repeat:no-repeat;
}
ul#menu li#menu_realisations a:active {
	background-image:url(images/ecole_09actif.jpg);
	background-repeat:no-repeat;
}
ul#menu li#menu_enseignant a:active {
	background-image:url(images/ecole_10actif.jpg);
	background-repeat:no-repeat;
}
ul#menu li#menu_joindre a:active {
	background-image:url(images/ecole_11actif.jpg);
	background-repeat:no-repeat;
}

/* menu cliqué */


ul#menu li#menu_ecole a:focus  {
	background-image: url(images/ecole_05actif.jpg);
	background-repeat: no-repeat;
}
ul#menu li#menu_etudes a:focus {
	background-image: url(images/ecole_08actif.jpg);
	background-repeat:no-repeat;
}
ul#menu li#menu_realisations a:focus {
	background-image:url(images/ecole_09actif.jpg);
	background-repeat:no-repeat;
}
ul#menu li#menu_enseignants a:focus {
	background-image:url(images/ecole_10actif.jpg);
	background-repeat:no-repeat;
}
ul#menu li#menu_joindre a:focus {
	background-image:url(images/ecole_11actif.jpg);
	background-repeat:no-repeat;
}


/* sous menu (je sais pas encore comment*/
</style>

et enfin le résultat que je voudrais obtenir:

http://sd-1.archive-host.com/membres/up/1190794521/ecole.jpg

lien actuel :
http://lereseau.nuxit.net/ecole-design/#

J'espère j'ai été assez clair, si no merci de me redemander car c'est important
Je précise que je ne suis pas pro en CSS donc s'il y a une autre facon d'écrire la syntaxe plus compréhensible qui me faciliterai la tâche, n'hésitez pas à me le dire
Merci d'avance!
Modifié par zaynab87 (22 Feb 2008 - 21:01)

Bonjour et bienvenue,

tu cherches au final à créer un menu déroulant, pas un "simple" menu horizontal? Ou bien j'ai pas compris?
Ce n'est plus un simple problème de background sur le menu principal, commence plutôt par avoir un menu déroulant fonctionnel puis il sera temps de styler les différents éléments

Merci d'avoir répondu,
Ca serait un menu vertical plutôt, pour qu'il soit fonctionnel, je dois le placer sur "li". Mais comment faire si je ne peut le placer dans le même style. En fait je sais pas si tu me suis, j'aimerai simplement un menu déroulant sur un état déja définit dans un style comme j'ai montré dans la capture d'image, mais il a déjà un background

vraiment personne pour m'aider?

Bonsoir,
Je travaille sur le même thème que le tien en ce moment.
Ce lien devrait pouvoir t'aider.

http://css.developpez.com/cours/menuderoulant/

cordialement

Ah merci ! Je crois je me suis basée sur ce modèle pour le faire dans mes débuts mais je me suis peut etre trop penché sur le graphisme plutot que le type de construction, mais je vais y réfléchir