J'ai un menu déroulant et je ne peux atteindre certaines options sous IE7.
Sous Firefox tout fonctionne correctement.
Le déroulement est géré en JavaScript
Mon menu :
Ma feuille de style:
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 <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="SousMenu1.php">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="Option1.php">Option 1 </a></li> <li><a href="Option2.php">Option 2</a></li> <li><a href="Option3.php">Option 3</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');" >Sous Menu 2</dt> <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"> <ul> <li><a href="Option 4.php">Option 4.</a></li> <li><a href="Option 5.php">Option 5.</a></li> <li><a href="Option 6.php">Option 6.</a></li> </ul> </dd> </dl> </div>
Ma page :
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 body { margin: 0; padding: 0; background: #FEEEBC; font: 12px verdana, sans-serif; } 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; } #menu { width:100%; top:0px; z-index: 2; float:left; position:absolute; } #menu dl { float: left; width: 15em; } #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; }
A priori les options que je ne peux atteindre sont celles qui chevauchent le bloc "Contenu"
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 <?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_3.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>
Partager