Menu déroulant et lien actif

Bonjour

Dans un menu déroulant j'aimerais que ce soit la page de niveau 1 qui soit considérée comme active quand l'une de des sous-pages est active.

J'ai peur de ne pas être clair, donc concrètement sur mon site (www.azertix.fr) je voudrais que le menu "formations" reste coloré quand l'une des pages du sous-menu est ouverte.

Pour l'instant, seule la page active du sous-menu reste colorée quand elle est ouverte.

Voici le code du menu :

#nav, #nav ul {
	float: left;
	list-style: none;
	line-height: 1;
	font-weight: normal;
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0em;
	margin-left: 0;
}
#navcontainer {
	background-image: url(sfnav/topbar_bg.png);
	height: 38px;
	border-top: 1px solid #ff6600;
	border-bottom: 1px solid #ff6600;
}
#nav a {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	padding-right: 8px;
	padding-left: 8px;
	line-height: 38px;
	font-family: Arial,sans-serif;
	letter-spacing:2px;
	font-size: 13px;
	border-bottom:0px;
}
#nav #menulevel2 .nave a {
	padding-right: 7px;
	border-top: 1px solid #ff6600;
	border-bottom: 1px solid #ff6600;
}
#nav #menulevel3 .nave a {
	padding-right: 7px;
	border-bottom-width: 1px !important;
	border-bottom-style: solid !important;
	border-bottom-color: #543d56 !important;
}
#menulevel1 a {
	color: #FFFFFF;
	padding-right: 10px;
	padding-left: 10px;
	background-image: url(sfnav/topbar.png);
	background-repeat: no-repeat;
	background-position: right top;
}
#nav ul a:hover {
	color: black!important;
	background-image: url(sfnav/topbar_over.png)!important;
	color:#ff6600;
	background-image: url(sfnav/topbar.png);
}
#menulevel2 a {
	padding-right: 7px;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #543d56;
	border-right-color: #543d56;
	border-left-color: #543d56;
	-display:none;
}
#menulevel3 a {
	padding-right: 7px;
	border-right-width: 0px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none !important;
	border-left-style: solid;
	border-right-color: #543d56;
	border-left-color: #543d56;
	border-top-width: 1px;
	border-bottom-width: 0px;
	border-top-color: #543d56;
}
#nav li {
	float: left;
	text-align: left;
	padding: 0;
}
#nav .navactive {
	color: black!important;
	background-image: url(sfnav/topbar_active.png)!important;
	background-position: right top!important;
	color:#ff6600;
	background-image:url(sfnav/topbar.png);
}
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 10.4em;
	font-weight: normal;
	margin: 0;
}
#nav li li {
	padding-right: 1em;
	width: 10.4em
}
#nav li ul a {
	width: 8em;
}
#nav li ul ul {
	margin-top: -2.25em;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 7em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}
#nav .doc{background-image: none;}
#nav .docs{background-image: none;}
#nav .sdoc{background-image: none;}
#nav .sdocs{background-image: none;}

Merci d'avance.
:)
Modifié par delan10 (26 Oct 2008 - 22:10)

Bonjour,

C'est à toi de générer le bon code HTML. Il y a une réponse dans la FAQ à la sempiternelle question «comment marquer la page ou rubrique en cours comme active?», et la réponse est d'identifier les éléments dont l'apparence doit être différente avec des classes ou identifiants.

Donc si ton LI ou A de premier niveau correspondant à la rubrique en cours doit avoir une tête différente, il faut que tu génères un code HTML en fonction, et modifie ton code CSS pour avoir un style spécifique pour la classe ou l'identifiant utilisé.