28172 sujets

CSS et mise en forme, CSS3

Différentes couleurs de sections dans un menu déroulant

Bonjour à tous,

C'est la première fois que je poste sur alsacréations puisque j'y avais jusqu'à maintenant trouvé tout ce dont j'ai besoin,
mais je suis en train de créer mon premier site et je bloque sur le menu :

chaque section de mon menu est défini par une couleur différents et je voudrais retrouver cette couleur dans la partie déroulante de la section.
Pour l'instant, je n'ai réussi qu'à mettre une seule couleur.

Si quelqu'un a une proposition pour m'aider, merci d'avance.

Voici mon code :

HTML


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=fr">


<!-- En tete de la page-->
	<head>
		<!--<meta http-equiv="content-type" content="text/html; charset=UTF-8" />-->
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
		<link href="rvl_association_style.css" rel="stylesheet" type="text/css" media="screen" title="Lyon">
	    <script type="text/javascript" src="index_menu.js"></script>
	</head>

	
<!-- Menu de la page-->
 <body lang="fr">
	<div id="bandeau_haut"> 
		<div id="top">
			<ul id="nav">
				<li><a class="association"></a><!--L'association<img src="images/images_index/menu_association.jpg">-->
					<ul>
						<li><a href="rvl_1000.html">Qui sommes nous</a></li>
						<li><a href="rvl_1000.html">Bureau et CA</a></li>
						<li><a href="rvl_1000.html">Journal</a></li>
					</ul>
				</li>
				<li><a class="histoire"></a><!-- 60 ans d'histoire <img src="images/images_index/menu_60ans.jpg">-->
					<ul>
						<li><a href="rvl_1000.html">1948-1956 : Des initiatives diverses</a></li>
						<li><a href="rvl_1000.html">XXXXXXXX</a></li>
						<li><a href="rvl_1000.html">XXXXXXXX</a></li>
					</ul>
				</li>
				<li><a class="patrimoine"></a><!-- Patrimoine <img src="images/images_index/menu_patrimoine.jpg">-->
					<ul>
						<li><a href="rvl_1000.html">La commission</a></li>
						<li><a href="rvl_1000.html">L'Hotel de Ville</a></li>
						<li><a href="rvl_1000.html">Saint Jean</a></li>
					</ul>
				</li>
				<li><a class="projet"></a><!-- Projet <img src="images/images_index/menu_projets.jpg">-->
					<ul>
						<li><a href="rvl_1000.html">Présentation des projets</a></li>
						<li><a href="rvl_1000.html">Vieux Lyon 2013</a></li>
						<li><a href="rvl_1000.html">Les 50 ans de l'UCIL</a></li>
						<li><a href="rvl_1000.html"></a>Les journées du Patrimoine</li>
						<li><a href="rvl_1000.html"></a>Berges de Saône</li>
					</ul>
				</li>
				<li><a class="quartier"></a><!-- Vie de quartier <img src="images/images_index/menu_vie.jpg">-->
					<ul>
						<li><a href="rvl_1000.html">La commission</a></li>
						<li><a href="rvl_1000.html"></a>Actualités</li>
						<li><a href="rvl_1000.html"></a>Réalisations</li>
					</ul>
				</li>
				<li><a class="historique"></a><!-- Le site historique de Lyon <img src="images/images_index/menu_site.jpg">-->
					<ul>
						<li><a href="rvl_1000.html">Histoire de Lyon</a></li>
						<li><a href="rvl_1000.html"></a>UNESCO</li>
					</ul>
				</li>
				<li><a class="pratique"></a><!-- RVL pratique <img src="images/images_index/menu_pratique.jpg">-->
					<ul>
						<li><a href="rvl_1000.html">Contact</a></li>
						<li><a href="rvl_1000.html"></a>Edition / Publication</li>
						<li><a href="rvl_1000.html"></a>Visites</li>
						<li><a href="rvl_1000.html"></a>Agenda</li>
						<li><a href="rvl_1000.html"></a>Stages</li>
						<li><a href="rvl_1000.html"></a>Liens</li>
						<li><a href="rvl_1000.html"></a>Bulletin d'adhésion</li>
					</ul>
				</li>
			</ul>
			<hr>
		</div>
	</div>

	
<!-- Corps de la page-->
	<div id="conteneur"> 
		<div id="main_gauche">
			<h1>1958-1968 :</h1>
			<h2>Des initiatives diverses</h2>
			<div id="a_voir_aussi">
				<p>A voir aussi :</p>
				<h3>1958-1968 :</h3>
				<h4>Un dynamique redémarrage</h4>
				<h3>1968-1980 :</h3>
				<h4>La redécouverte d'un quartier</h4>
			</div>
		</div>
		
		<div id="main_droit">
			<p><img src="images/images_site/images_association/vignettes/vieux-lyon-nuit800_mini.jpg"></p>
			<p><span class="titre_photo">Vieux Lyon</span></p>
		</div>		
	
		<div id="main_milieu">
			<div id="arianne_top">
				<p><span class="arianne_association"> > </span>L'association<span class="arianne_association"> > </span>1946-1958 : Des initiatives diverses</p>
			</div>
			<p><span class="lettrine_association">L</span>association culturelle </p>
			
			<div id="arianne_bottom">
			<p><span class="arianne_association"> > </span>L'association<span class="arianne_association"> > </span>1946-1958 : Des initiatives diverses</p>
			</div>
		</div>
		<hr>
	</div>
	
	
	
	
<!-- Pied de page-->
	<div id="bas">
			<div id="footer">
				<p>Contact<span class="barre_footer"> | </span>Plan du site<span class="barre_footer"> | </span>Mentions Légales<span class="barre_footer"> | </span>Credits<span class="barre_footer"> | </span>Agenda</p>
			</div>
	</div>
</body>


	
</html>


CSS


html {
	font-size: 100%; /* Évite un bug d'IE 6-7. (1) */ 
 } 
 
body{
	width:100%;
	
	background:url(images/images_index/fond_blanc_casse.jpg) repeat top left;

	margin:0 auto;   
	padding:0;
}
	
#bandeau_haut{
	/*position:fixed;*/
	height:110px;
	width:100%;
	
	background:url(images/images_site/images_association/images/top_association.jpg) no-repeat top center;
	
	margin:0 auto;   
	padding:0;
	
	text-align: center;
}
	
#top{
	height:110px;
	width:1024px;
		
	margin:0 auto;
	float:bottom;
}

#nav {
	padding: 0;
	margin:0 auto;
	list-style: none;
}

#nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a.association {
	display: block;
	height:111px;
	width: 132px;
	text-decoration:none;
}

#nav a.histoire {
	display: block;
	height:111px;
	width: 160px;
	text-decoration:none;
}

#nav a.patrimoine {
	display: block;
	height:111px;
	width: 125px;
	text-decoration:none;
}

#nav a.projet {
	display: block;
	height:111px;
	width: 99px;
	text-decoration:none;
}

#nav a.quartier {
	display: block;
	height:111px;
	width: 147px;
	text-decoration:none;
}

#nav a.historique {
	display: block;
	height:111px;
	width: 222px;
	text-decoration:none;
}

#nav a.pratique {
	display: block;
	height:111px;
	width: 139px;
	text-decoration:none;
}

#nav li {
	float: left;
}

#nav li ul {
	position: absolute;
	width:150px;
	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	background-color:red;
}

#nav li:hover ul {
	left: auto;
}

a img
{
	border: none;
}

	
#conteneur{
	height:610px;
	width:980px;
	
	margin-top:10px;
	margin-bottom:10px;
	
	padding:0px 0px 0px 0px;
}

#main_milieu{
	height:600px;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
	
	margin-left:200px;
	margin-right:200px;
	margin-top:0px;
	margin-bottom:0px;
	
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:12px;
	color:#000000;
	line-height:20px;
	text-align:justify;
}

#main_gauche {
	width:190px;
	height:600px;
		
	float:left;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:18px;
	color:#FF0000;
	line-height:20px;
	text-align:center;
}

#main_droit {

	width:190px;
	
	float:right;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:13px;
	color:#FF0000;
	line-height:20px;
	text-align:center;
}

#arianne_top{

	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:13px;
	text-align:left;
}

#arianne_bottom{
	
	float:right;

	padding-top:20px;
	
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:13px;
	text-align:right;
}

#a_voir_aussi{
	
	float:left;

	padding-top:430px;
	
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	color:#000000;
	font-size:13px;
	text-align:left;
}

hr {
	clear: both;
	visibility: hidden;
}

h1 {
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:18px;
	color:#FF0000;
	line-height:6px;
	text-align:left;
}

h2 {
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:16px;
	color:#000000;
	line-height:0px;
	text-align:left;
}

h3 {
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:15px;
	color:#FF0000;
	line-height:0px;
	text-align:left;
}

h4 {
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:13px;
	color:#000000;
	line-height:15px;
	text-align:left;
}

.arianne_association{
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:13px;
	color:#FF0000;
	line-height:12px;
	font-weight: bold;
}

.lettrine_association{
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	
	margin-right:1px;
	float:left;
	color:#FF0000;
	font-size:6em;
	line-height:1.55ex;
	padding:0px;
}

.lien_pied_de_page{
	color:#000000;
	text-decoration:none;
}

.barre_footer{
	color:#999999;
	font-size:16px;
}

.titre_photo{
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:13px;
	color:#FF0000;
	line-height:12px;
	font-weight: bold;
}

#bas{
	width:100%;
	height:40px;
	
	background:url(images/images_index/Bandeau_rouge_et_violet_bas.jpg) no-repeat top center;
	
	margin:0 auto;

	float:left;
}

#footer{
	width:100%;
	height:39px;

	border-top:2px solid #ff0000;
	
	margin:0 auto;
	
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size:13px;
	line-height:20px;
	text-align: center;
}

#pied_de_page{
	font-family: Arial, Helvetica, FreeSans, sans-serif;

	margin-top:5px;
	float:left;
	font-size:11px;
	line-height:0px;

	padding-left:5px;
	padding-right:5px;
	
	border-right:1px solid #999999;
}


Javascript


sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
[/i][/i]
Si j'ai bien compris : 

.association
{
background-color: red;
}

.association ul li a
{
background-color: red;
}

Ce faisant, la section "association" et son menu déroulant seront en fond rouge
Reste à répéter l'opération pour chaque section
Merci pour ta réponse lautrejojo, mais j'ai beau essayer dans tous les sens, ça ne marche pas mieux Smiley confus
Peut-être d'autres idées ?
Sujet clos
Aller à