Menu javascript sous ie7

Bonjour
J'ai un menu dynamique qui fonctionne bien sous Firefox et IE6 mais qui coince sous IE7.
Ce qui se passe :

lorsqu'on passe le curseur sur l'image d'un menu de premier niveau, le menu de deuxième niveau correspondant se déroule bien
quand on veut ensuite accéder à une ligne de ce menu de deuxième niveau, le menu se referme

Le code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<span class="menu_machines"></span>
		</dt>
		<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="lcr600.html">LCR 600 Kawasaki</a></li>
				<li><a href="mr600.html">MR 600 Suzuki</a></li>
				<li><a href="panda.html">Panda 1100 Suzuki</a></li>
				<li><a href="choda.html">Choda 1000 GSXR</a></li>	
			</ul>
		</dd>		
	</dl>
	<dl>
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">			
			<span class="menu_historique"></span>
		</dt>
		<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="2008_saison.html">2008</a></li>
			</ul>
		</dd>			
	</dl>
	<dl>
		<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<span class="menu_hommes"></span>
		</dt>
		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="gueranger.html">Christophe Gueranger</a></li>
				<li><a href="hergott.html">Jean Louis Hergott</a></li>
				<li><a href="isope.html">Dominique Isope</a></li>
				<li><a href="moise.html">Laurent Mois&eacute;</a></li>
				<li><a href="vincent.html">Patrice Vincent</a></li>				
			</ul>
		</dd>
	</dl>
	<dl>
		<dt onmouseover="javascript:montre('');">
			<span class="menu_accueil_actif"><a href="accueil.html"></a></span>
		</dt>
	</dl>
</div>

Le code CCS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#menu {
	position: absolute; 
	top: 124px;
	right: 0px;
	z-index: 100;
	width: 763px;
	}
#menu dl, #menu dt, #menu dd, #menu ul, #menu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#menu dl {
	float: right;
	width: 109px;
	}
#menu dt {
	cursor: pointer;
	}
#menu dt span, #menu dt a {
	display: block;
	width: 109px;
	height: 22px;
	}
 
.menu_accueil {
	background:  url(../images/btn_accueil_off.gif) no-repeat;
	}
.menu_accueil_actif {
	background:  url(../images/btn_accueil_actif.gif) no-repeat;
	}	
.menu_accueil:hover, .menu_accueil:focus  {
	background:  url(../images/btn_accueil_on.gif) no-repeat;
	}
 
.menu_hommes {
	background:  url(../images/btn_hommes_off.gif) no-repeat;
	}
.menu_hommes_actif {
	background:  url(../images/btn_hommes_actif.gif) no-repeat;
	}
.menu_hommes:hover, .menu_hommes:focus, .menu_hommes_actif:hover, .menu_hommes_actif:focus {
	background:  url(../images/btn_hommes_on.gif) no-repeat;
	}
 
.menu_historique {
	background:  url(../images/btn_historique_off.gif) no-repeat;
	}
.menu_historique_actif {
	background:  url(../images/btn_historique_actif.gif) no-repeat;
	}
.menu_historique:hover, .menu_historique:focus, .menu_historique_actif:hover, .menu_historique_actif:focus {
	background:  url(../images/btn_historique_on.gif) no-repeat;
	}
 
.menu_machines {
	background:  url(../images/btn_machines_off.gif) no-repeat;
	}
.menu_machines_actif {
	background:  url(../images/btn_machines_actif.gif) no-repeat;
	}	
.menu_machines:hover, .menu_machines:focus, .menu_machines_actif:hover, .menu_machines_actif:focus {
	background:  url(../images/btn_machines_on.gif) no-repeat;
	}

Le code Javascript :

Code:

1
2
3
4
5
6
7
8
9
// Menu principal déroulant
	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';}
	}

Pour voir un exemple : http://papapetch.free.fr/fort_dernier/fr/accueil.html

Merci pour votre aide

Bonjour,

Je ne sais pas si ça changera quelque chose.
Un élément en absolute se place par rapport à son plus proche parent positionné.
Essaie de remplacer dans #menu ta position: absolute; par position: relative;

Le parent en l'occurence c'est body.
Le menu est donc positionné par rapport au coin haut-gauche de la page.
Le mettre en relatif le positionnerait par rapport au bloc précédent.
Je ferai un test ce soir (upload impossible au bureau)

J'ai trouvé un palliatif qui n'est pas génial mais qui marche.
Ce n'est toujours pas du css pur, ce sera pour une prochaine version.