18041 sujets

Questions générales et questions de débutants

Menu déroulant et selectbox sous IE

Bonjour à tous,

Est-ce que quelqu'un sait pourquoi les selectbox restent au dessus du menu sous IE et y a-t-il un moyen de contourner ce problème ?

voici un exemple de code :

<!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" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels  http://css.alsacreations.com  */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>

<body>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">

				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>

					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	
</div>


<div id="site">
<select><option>toto</option><option>toto</option><option>toto</option><option>toto</option></select>
<select><option>toto</option><option>toto</option><option>toto</option><option>toto</option></select>
<select><option>toto</option><option>toto</option><option>toto</option><option>toto</option></select>
<select><option>toto</option><option>toto</option><option>toto</option><option>toto</option></select>
<select><option>toto</option><option>toto</option><option>toto</option><option>toto</option></select>
<select><option>toto</option><option>toto</option><option>toto</option><option>toto</option></select>
</div>

</body>
</html>



merci à vous

PoichOU
erf ça veut dire que personne n'a jamais mis une selectbox en dessous d'un menu et que personne ne sait comment résoudre ce problème ? Smiley sweatdrop Smiley sweatdrop
Bonjour Poichou,

Je viens de trouver ce lien sur le oueb :
http://mguessan.free.fr/html/menu.html#Résolution-du-problème-des-listes-de-choix
a écrit :
...les objets select, pour une raison étrange, sont windowed. Cela signifie qu'ils ne tiennent pas compte du z-index appliqué aux autres éléments HTML.

Cela te permettra peut-être de faire avancer le smilblick ?...

Ceci étant dit, la solution proposée pour remédier au énième "surprenant" comportement du navigateur IE, me semble pour le moins..."compliquée", pour un "problème" que tu pourrais aisément éviter en ménageant suffisamment d'espace pour que ton menu puisse gentiment se déplier à son aise en plaçant ta liste de choix "ailleurs" (plus bas, à droite, à gauche...) non ?

Bonne journée,
Cdt,
Sylvain
Modifié par 6l20 (13 Feb 2008 - 16:48)
merci de ta réponse 6l20

Smiley choque Smiley choque Smiley choque ouahou quelle bidouille ! passer par une iframe ... ouais ça marche mais c'est pas top. J'suis d'accord avec toi, mieux vaut éviter de mettre une liste déroulante en dessous d'un menu.

Mais je trouve que ce lien et cette astuce mériterait d'être cité dans le tuto voir même être dans la FAQ. Rafou si tu passes par là Smiley cligne ...


merkiiii beaucoup pour ta réponse en tout cas Smiley biggthumpup

PoichOU
Sujet clos
Aller à