Discussion :

[Papapetch]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[matimat2k4]

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;

[Papapetch]

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)

[Papapetch]

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.