18041 sujets

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

Compatibilité menu vertical Firefox IE7

J'utilise un de vos tutorial pour un menu vertical déroulant.
Il fonctionne correctement sous Firefox mais sous IE7 le menu se déroule mais je ne pas accéder à toutes les options.

Code HMTL:

<?php
require('TestMenu_2.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>


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="#">Sous Menu</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Sous Menu 1</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Option 1.1</a></li>

					<li><a href="#">Option 1.2</a></li>
					<li><a href="#">Option 1.3</a></li>
				</ul>

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

					<li><a href="#">Option 2.2</a></li>
					<li><a href="#">Option 2.3</a></li>
				</ul>
			</dd>
	</dl>


</div>


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;
}
Le problème vient de la partie onmouseover et onmouseout pour faire disparaître le menu dès que souris n'est plus dessus.
En supprimant cette fonctionnalité je n'ai plus du tout ce souci sous IE7

J'ai pourtant recopié le code du tutorial.

Une idée ?
Modifié par aragorn23 (09 Oct 2007 - 23:41)
Modérateur
Salut,

Si, je comprends bien, tu mets le menu et le code js en include avant le doctype ?! Smiley sweatdrop

Pourquoi ne pas mettre le script dans le head du document et le menu dans le body ?
Modifié par koala64 (10 Oct 2007 - 10:09)
C'est parce-que j'appelle ce menu depuis d'autres pages HTML.
C'est la seule solution que j'ai trouvé pour ne pas intégrer le menu dans chacune de mes pages.
Mais le problème ne vient pas de là à priori.
Sujet clos
Aller à