28173 sujets

CSS et mise en forme, CSS3

Pb masquage menu sous IE

J'essaie de masquer mes menus déroulants lorsque la souris ne passe plus dessus.

Cela fonctionne correctement sous Firefox, par-contre sous IE6 ou 7 je n'arrive pas à accéder à toutes les options du menu.

Je me suis inspiré des exemples du site avec Javascript et CSS.

Mon programme principal :


<?php
require('TestMenu_5.html');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="CSS/Menu_2.css" rel="stylesheet" type="text/css" />
<title>Test affiche menu</title>
</head>

<body>
<div id = "contenu">
  <form name="form1" method="post" action="">
    CECI EST UN TEST 
  </form>
</div>
</body>
</html>


Mon menu :


<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>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="Deconnexion.php">Déconnexion</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Données Personnelles.</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"> 
		<!--	<dd id="smenu1"> -->
				<ul>
					<li><a href="DonneesPersonnellesFormulaireModification.php">Fiche personnelle : Modification</a></li>

					<li><a href="AffichageDonneesPersonnelles.php">Fiche personnelle : Visualisation</a></li>
					<li><a href="PoidsListe.php">Suivi du poids.</a></li>
				</ul>

			</dd>
	</dl>
	
		
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');" >Footings</dt>
			  <dd id="smenu2" onmouseover="javascript:montre('smenu2');"  onmouseout="javascript:montre('');">  
			  <!-- <dd id="smenu2"> -->
				<ul>
					<li><a href="ParcoursListe.php">Parcours.</a></li>

					<li><a href="FootingsListe.php">Footings.</a></li>
					<li><a href="FractionneListe.php">Fractionnés.</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Statistiques</dt>

			 <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<!-- <dd id="smenu3">  -->
				<ul>
					<li><a href="StatistiquesAnnuelles.php">Km  parcourus par ann&eacute;e.</a></li>
					<li><a href="StatsParcours.php">Parcours</a></li>
					<li><a href="StatistiquesSemaines.php">Km parcourus par semaine.</a></li>
					<li><a href="StatistiquesComparatifSemaines.php">Statistiques comparatives par semaines.</a></li>
					<li><a href="StatistiquesPoids.php">Statistiques poids.</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Utilitaires</dt>

			 <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre(' ');"> 
		<!-- 	 <dd id="smenu4"> -->
			 	<ul>
					<li><a href="Abecedaire.php">Abécédaire.</a></li>
					<li><a href="Moyenne.php">Calcul de moyenne.</a></li>
					<li><a href="TableauTempsVitesses.php">Tableau des vitesses.</a></li>
					<li><a href="TableauFCM.php">Tableau des fréquences cardiaques</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">?</dt>

			 <dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');"> 
		<!-- 	<dd id="smenu5"> -->
				<ul>
					<li><a href="AideLigne/GestionFootings.htm">Aide.</a></li>
					<li><a href="APropos.php">A propos.</a></li>
					<li><a href="EnvoiMailWebmaster.php">Contact.</a></li>
				</ul>
			</dd>
	</dl>

</div>


Ma feuille de style :


body {
margin: 0;
padding: 0;
background: #FEEEBC;
font: 12px verdana, sans-serif;
}
#menu {
width:100%;
top:0px;
z-index: 2;
float:left;
position:absolute;
font: 11px verdana, sans-serif;
}
#menu dl {
float: left;
width: 14em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #3B4E77;
color: #fff;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
color: #fff;
background: #3B4E77;
}
#menu li {
text-align: center;
background: #3B4E77;
margin: 10px;
}
#menu li a, #menu dt a {
color: #fff;
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: #F2462E;
border-right: 1px solid #fff;
}
div#contenu {
	width:1200px;
	height:600px;
	top:70px;
	left:10px;
	float:left; 
	z-index: 1;
	position:absolute;
	}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

Modifié par aragorn23 (27 Dec 2007 - 18:46)
Salut,

Ton problème a peut-être un rapport avec l'emplacement de ton require : tu inclus ton menu avant-même le doctype, alors qu'il devrait logiquement se trouver dans le body, et le script dans le header.
Sujet clos
Aller à