Masquage menu sous IE6 et IE7
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.
Mon programme principal :
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
|
<?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 :
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
65
66
67
68
69
70
71
72
73
74
75
|
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é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:
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
|
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;
} |
Précisions sur mon problème
J'ai oublié de préciser dans mon problème que si je n'utilise pas la fonction javascript onmouseout mon menu se déroule correctement sous IE et j'arrive à accéder à toutes les options.
Peux-tu m'indiquer précisement ce que tu entends par séparer le body du menu ?
Cela donne quoi au niveau du code ?
Merci d'avance
