[Résolu] Menu CSS dessous malgré z-index supérieur

Bonjour,

Jusqu'à aujourd'hui, je n'avais jamais eu de problème avec ces menus déroulant en utilisant CSS et Javascript.

Mon menu est placé dans un DIV "menu", ayant un z-index à 100. Tous les éléments à l'intérieur sont donc censé en hériter. Le problème, mon image et le texte associé sous le menu surplombe le menu, et donc il est inutilisable.

Voici la page d'accueil :
http://lemoineaudamien.free.fr/vincent/fr/

Le code du menu :

<!-- Menu généré automatiquement -->
			<dl>
				<dt onmouseover="javascript:montre();"><a href="index.php" title="Accueil">Accueil</a></dt>
			</dl>

			<dl>	
				<dt onmouseover="javascript:montre('smenu1');" title="Profil">Profils</dt>
				<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
					<ul>
						<li><a href="#">Sous-menu 1</a></li>
						<li><a href="#">Sous-menu 2</a></li>
					</ul>
				</dd>
			</dl>
			
			<dl>			
				<dt onmouseover="javascript:montre('smenu2');" title="Expeditions">Exp&eacute;ditions</dt>
				<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
					<ul>
						<li><a href="#">Sous-menu 1</a></li>
						<li><a href="#">Sous-menu 2</a></li>
						<li><a href="#">Sous-menu 3</a></li>
						<li><a href="#">Sous-menu 4</a></li>
					</ul>
				</dd>
			</dl>
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu3');" title="Voyages">Voyages</dt>
				<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
					<ul>
						<li><a href="#">Sous-menu 1</a></li>
						<li><a href="#">Sous-menu 2</a></li>
						<li><a href="#">Afrique du sud et du nord</a></li>
					</ul>
				</dd>
			</dl>
			
			<dl>
				<dt onmouseover="javascript:montre();"><a href="#" title="Partenaires">Partenaires</a></dt>
			</dl>
			
			<dl>
				<dt onmouseover="javascript:montre();"><a href="contact.php" title="Contact">Contact</a></dt>
			</dl>
<!-- Fin menu -->

Lle CSS du menu :

/* CSS Menu */

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu {
	padding-top: 3px;
	width: 520px;
	height: 17px;
	text-align: left;
	z-index: 100;
}

#menu dl {
	height: 17px;
	width: 86.6px;
	float: left;
	text-align: left;
}

#menu dt {
	text-align: center;
	color: #000000;
	padding-top: 2px;
	display: block;
	height: 100%;
	text-decoration: none;
	cursor: default;
}

#menu dt a {
	text-align: center;
	color: #000000;
	display: block;
	height: 100%;
	text-decoration: none;
	cursor: pointer;
}

#menu dt:hover {
	cursor: default;
	background-color: #FF0000;
	color: #FFFFFF;
}

#menu dt a:hover {
	background-color: #FF0000;
	color: #FFFFFF;
}

#menu dd {
	display: none;
}

#menu li {
	text-align: center;
	background-color: #000000;
	cursor: pointer;
}

#menu li a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	border-bottom: 1px solid #999999;
}

#menu li a:hover {
	background-color: #FF0000;
	color: #FFFFFF;
}

Modifié par DachMt (19 Nov 2007 - 18:10)

Bonjour,

Règle d'or de la propriété z-index: elle n'est active que pour des éléments positionnés (en absolute, relative ou fixed).
http://www.w3.org/TR/CSS21/visuren.html#z-index

D'après ton code CSS, div#menu est en positionnement statique (par défaut). Le z-index n'est donc pas pris en compte.
Tu peux positionner div#menu en relatif, par exemple.

Merci Florent,

C'était exactement ça ! (petit oubli de ma part, puisque d'habitude j'avais bien ma propriété "position" dans mon CSS).

Merci beaucoup...