[Résolu ] Menu Déroulant... ben non ...pas sous IE :-(

Bonjour,

Comme de nombreuses personnes j'ai utilisé le formidable tuto concernant les menus déroulant.
J'ai parcouru le forum de long en large et j'ai cru trouver un débute de solution... et puis non. Je me décide donc à poster.

J'ai utilisé la variante du tuto qui permet au menu de se fermer automatiquement.
Sous FF win, FF mac, Safari c'est ok pas de problèmes.
Par contre, sous IE. Impossible de dérouler le menu.

Un exemple vaut mieux qu'un long discourt :
http://promotion.ref-union.org/test/barnav_new.php

J'ai l'impression que le fait d'afficher le menu en dehors de la div le fait disparaitre ...?
J'ai cru trouver la réponse dans un Z-index mais sans résultat.
D'autres messages sur le forum indique qu'il est nécessaire d'avoir de vrai liens... J'ai donc "populé" un menu mais j'ai toujours le problème.

Merci de vos lumières.
Guillaume alias Guitou
Modifié par Guitou (23 May 2008 - 17:22)

Pour plus de facilité, j'ajoute le code :

Le CSS :

   
/* default styles
   -------------- */
  
body { 
	padding: 0; 
	margin: 0; 
	font: 0.74em Arial, Helvetica, sans-serif; 
	line-height: 1.5em;
	background: #fff; 
	color: #454545; 
}

a {
	color: #4A8EBC; 
	background: inherit;
}

a:hover {
	color: #C3593C;
	background: inherit;	
}

a.title {
	color: #FE6700;
	background: #FFF;
}

h1 {
	font: bold 2em "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: -1px; 
	padding: 2px 0 0 0px;
	margin: 0;
	color: #464548;
	background: inherit;
}

h1 a, h2 a {
	text-decoration: none;
	color: #464548;
	background: inherit;
}

h1 a:hover, h2 a:hover {
	color: #C3593C;
	background: #FFF;
}

h1 .red{
	color: #C3593C;
	background: inherit;
}


h2 { 
	margin: 0 0 5px 0; 
	padding: 0; 
	font: bold 1.5em Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	color: #000; 
	background: inherit;
}

h2 .yellow{
	color: #FFFCD1;
	background: inherit;
}

p {	margin: 0 0 5px 0; }

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

form { 
	margin: 0; 
}

input.search { 
	width: 145px; 
	height: 22px;
	border: none;
	background: #fff url(input.gif) no-repeat; 
	padding: 5px 10px 0 25px;
	color: #808080;
}

input.button {
	border: 0;
	height: 27px;
	width: 76px;
	background: #ABC43C url(button.gif) no-repeat;
	color: #FFF;
	font: bold 1.1em Arial, Helvetica, Sans-Serif;
}

input.login { 
	width: 150px;
	border: none; 
	background: url(logininput.gif); 
	padding: 4px; 
}

/* layout
   ------ */

.content { 
	margin: 10px auto;

	width: 1000px; 
	
}

.logo {
	relative: left;
	width: 80px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 11px;
	padding-left: 10px;
}

.header_right {
	float: right;
	width: 845px;
	height: 72px;
	
}

.logo p {
	font-size: 0.9em;
	color: #808080;
	padding: 0 0 0 7px;
	background: inherit;
}


.top_info {
	width: 845px;
	text-align: right;
	background: #FFF url(dot.gif) repeat-x bottom;
	color: #444;
	margin-top: 12px;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0;
	padding-top: 0;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 0;
}
	

.slogan {
	text-align: right;
	width: 160px;
}


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position : absolute;
	width: 849px;

}
#menu dl {
float: left;
width: 10em;
margin-bottom: 10px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
position: absolute;
z-index: 100;
width: 15em;
}
#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 li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}


.search_field {
	text-align: right;
	float: right;
	width: 845px;
	height: 38px;
	background: #464548 url(searchbg.jpg) no-repeat top right;
	color: #000;
	clear: both;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 0;
}

.grey {
	font-size: 1.2em;
	font-weight: bold;
	color: #ccc;
	background: inherit;
	
}

.search {
	font-size: 1.2em;
	font-weight: bold;
	color: #FFF;
	background: inherit;	
}

.newsletter {
	float: left;
	height: 33px;
	padding: 15px 0 0 15px;
	width: 192px;
	background: #6E6E6E url(newsletterbg.gif) no-repeat;
	color: #FFF;
	margin: 0 0 3px 0;
}

.subheader {
	clear: both;
	margin: 3px 0 10px 0;
	padding: 8px;
	background: #f4f4f4;
	color: #808080;
	border-bottom: 1px solid #ccc;
}

/* barnav
   --------- */
.barnav{
	margin: 10px auto;
	margin-bottom: 30px;
	width: 1000px; 
}

/* left side
   --------- */

.left {
	float: left;
	width: 490px;
	margin: 0 0 10px 0;
}
	.left_articles {
		margin: 0 0 15px 0;
		padding: 0 0 0 10px;
	}

	.lt {
		height: 10px;
		background: #6E6E6E url(lt.gif) no-repeat;
		color: #FFF;
	}
	
	.lbox {
		color: #eee;
		padding: 3px 12px;
		margin: 0 0 15px 0;
		background: #6E6E6E url(lb.gif) no-repeat bottom left;
		height: 178px;
	}
	
	.lbox a {
		color: #FFFCD1;
		background: inherit;
	}
	
	.lbox h2 {
		color: #FFF;
		background: #6E6E6E;
	}
	
	
.thumb {
	float: left;
	width: 150px;
	border: 1px solid #d4d4d4;
	color: #fff;
	background: #6e6e6e;
	margin: 0 15px 15px 0;
	padding: 5px;
}

.thumb p { margin: 0; padding: 3px; color: #FFF; background: #6e6e6e; }
	
/* right1 side
   ---------- */
		
.right1 {
	float: right;
	width: 245px;
	margin: 0 0 10px 10px;
}

.right1 a {
	color: #FFFCD1;
	background: inherit;
}

		
	.rt_bleu {
		background: #C85E35 url(rt.jpg) no-repeat;
		color: #FFF;
		height: 7px;
	}
		
	.right_articles_bleu {
		font-size: 0.9em;
		background: #2a4397 url(rb.jpg) no-repeat bottom;
		color: #FEE1D5;
		padding: 4px 8px;	
		margin: 0 0 10px 0;
	}
	
	.rt_rose {
		background: #C85E35 url(rt_rose.jpg) no-repeat;
		color: #FFF;
		height: 7px;
	}
		
	.right_articles_rose {
		font-size: 0.9em;
		background: #96428F url(rb_rose.jpg) no-repeat bottom;
		color: #FEE1D5;
		padding: 4px 8px;	
		margin: 0 0 10px 0;

	}
	
	.rt_vert {
		background: #C85E35 url(rt_vert.jpg) no-repeat;
		color: #FFF;
		height: 7px;
	}
		
	.right_articles_vert {
		font-size: 0.9em;
		background: #32A404 url(rb_vert.jpg) no-repeat bottom;
		color: #FEE1D5;
		padding: 4px 8px;	
		margin: 0 0 10px 0;
	}
	
	.rt_turquoise {
		background: #C85E35 url(rt_turquoise.jpg) no-repeat;
		color: #FFF;
		height: 7px;
	}
		
	.right_articles_turquoise {
		font-size: 0.9em;
		background: #0080C1 url(rb_turquoise.jpg) no-repeat bottom;
		color: #FEE1D5;
		padding: 4px 8px;	
		margin: 0 0 10px 0;
		height:260px;
		width:auto;
	}


	.rt_orange {
		background: #C85E35 url(rt_orange.jpg) no-repeat;
		color: #FFF;
		height: 7px;
	}
		
	.right_articles_orange {
		font-size: 0.9em;
		background: #E67300 url(rb_orange.jpg) no-repeat bottom;
		color: #FEE1D5;
		padding: 4px 8px;	
		margin: 0 0 10px 0;
	}

	.rt_violet {
		background: #C85E35 url(rt_violet2.jpg) no-repeat;
		color: #FFF;
		height: 7px;
	}
		
	.right_articles_violet {
		font-size: 0.9em;
		background: #400698 url(rb_violet2.jpg) no-repeat bottom;
		color: #FEE1D5;
		padding: 4px 8px;	
		margin: 0 0 10px 0;
	}	
	
	
	.rt_jaune {
		background: #C85E35 url(rt_jaune.jpg) no-repeat;
		color: #FFF;
		height: 7px;
	}
		
	.right_articles_jaune {
		font-size: 0.9em;
		background: #437B70 url(rb_jaune.jpg) no-repeat bottom;
		color: #FEE1D5;
		padding: 4px 8px;	
		margin: 0 0 10px 0;
	}		
	
/* right2 side
   ---------- */
		
.right2 {
	float: right;
	width: 245px;
	margin: 0 0 10px 0;
}

.right2 a {
	color: #FFFCD1;
	background: inherit;
}

		
			
.image {
	float: left;
	margin: 0 9px 3px 0;
}
			
.image {
	float: left;
	margin: 0 9px 3px 0;
}

/* footer
   ------ */

.footer { 
	clear: both; 
	text-align: center;
	line-height: 1.8em;
	color: #808080;
	background: #FFF url(dot.gif) repeat-x;
	padding: 8px 0;
}

.footer a {
	color: #C3593C;
	background: inherit;
}

Et la page

<!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="en" lang="en">
<head>
	<meta name="author" content="F8ARR" />
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />

	<link rel="stylesheet" href="images/barnav_style.css" type="text/css" />
	
	<title>Accueil - Bienvenue, sur le site officiel du REF-Union.</title>
	<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>


</head>
<body>
	 <div class="barnav">
		<div class="header_right">
			<div class="top_info">
				<div class="top_info_right">
					<p><strong> RÉSEAU DES ÉMETTEURS FRANÇAIS - UNION FRANÇAISE DES RADIOAMATEURS</strong></p>					
			  	</div>		
			</div>
			<div class="subheader">
				<p>Union Nationale sans but   lucratif groupant les radioamateurs, fondée en 1925. 
				  Association reconnue   d'utilité publique par décret du 29.11.1952. 
				  Section française de l'Union   Internationale des Radioamateurs <a href="http://www.iaru.org/" target="_blank">(I.A.R.U.</a>)</p>
	  		</div>
			<div id="menu">
				<dl onmouseout="javascript:montre('')";>

					<dt onmouseover="javascript:montre();"><a href="http://www.ref-union.org" title="Retour a l'accueil">Accueil</a></dt>
				</dl>
	
			<dl onmouseout="javascript:montre('')";>			
				<dt onmouseover="javascript:montre('smenu1');">Association</dt>

				<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="http://adhesions.ref-union.org/">Adhésion / Cotisation</a></li>
				<li><a href="http://nomenclature.ref-union.org/">La nomenclature</a></li>
				<li><a href="http://boutique.ref-union.org/">La boutique</a></li>
				<li><a href="http://accueil.ref-union.org/a_la_une_supplement/pdf/assurance-mpf200X.pdf">Assurance OM (pdf)</a></li>
				<li><a href="http://radioref.ref-union.org/">Radio-REF</a></li>
				<li><a href="http://accueil.ref-union.org/contact.php#alias">Alias Email</a></li>
				<li><a href="http://f8ref.ref-union.org/">Le Bulletin F8REF</a></li>
				<li><a href="http://qsl.ref-union.org/">Les QSLs</a></li>
				<li><a href="http://annuaire.ref-union.org/">Coordonées Internes</a></li>
				<li><a href="http://diplomes.ref-union.org/">Les diplômes</a></li>
				<li><a href="http://documents.ref-union.org/">Les documents</a></li>
				<li><a href="http://musee.ref-union.org/service_historique">Le service historique</a></li>

		  </ul>
		</dd>
	</dl>
	
	
	<dl onmouseout="javascript:montre('')";>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<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 onmouseout="javascript:montre('')";>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<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 onmouseout="javascript:montre('')";>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<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>
	
		<dl onmouseout="javascript:montre('')";>	
		<dt onmouseover="javascript:montre('smenu5');">Menu 5</dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 5.1</a></li>
				<li><a href="#">Sous-Menu 5.2</a></li>
				<li><a href="#">Sous-Menu 5.3</a></li>

			</ul>
			</dd>
	</dl>

	    <form method="get" action="http://www.google.com/custom">
      <input type="hidden" name="sitesearch" value="ref-union.org" checked="checked" />
         <input name="q" size="10" maxlength="255" value=" Recherche" /> 
        <input type="submit" name="sa" value="OK" style="font-family: Tahoma; font-size: 10pt; " /></form>
	

		</div>
	
		</div>

	                <div align="center"><a href="http://telecharger.ref-union.org/sources/radioamateur/logo_ref.zip"><img src="images/logo_ref-union.jpg" alt="" width="75" height="118" border="0" /></a> </div>
	 </div>

Modifié par Guitou (20 May 2008 - 14:16)

sniff... personne ?

Bonjour Guitou,

Tu sembles avoir résolu ton soucis non ?
En tout cas cela fonctionne chez moi
Si tu souhaites masquer chaque sous-menu il faut ajouter :

onmouseout= "javascript:montre();" 

sur chaque dd

Cdt,
Sylvain

Salut,

Oui j'ai enfin réussi à corriger...
En fait j'ai tout repris de zéro.
Par contre un grand merci pour onmouseout= "javascript:montre();" sur les dd pour renrouler les menus

C'est génial comme ça !!
Super je vais pouvoir continuer .

Merci encore