pb avec un menu horizontal
Bonjour,
J'ai un petit problème.
J'ai utilisé un tutoriel CSS pour créer un menu horizontal simple.
Je souhaitais que le menu déroulant disparaisse quant la souris le quittait j'ai donc utilisé l'événement onmouseout avec la fonction suivante pour faire disparaitre le menu déroulant.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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> |
tout marche bien sur firefox sauf sous Internet explorer. Quand on descend vers le bas du menu déroulant et que l'on quitte le premier lien du menu celui-ci se ferme sans doute à cause du onmouseout.
Est-ce qu'il y aurait un moyen d'éviter ceci et d'avoir le même comportement que sous firefox ?
Voici mon code :
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
|
<div id="menus">
<dl>
<dt onmouseover="javascript:montre();"><a href="#" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Anime</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="index.php?lien=7">Enregistrer et modifier Anime</a></li>
<li><a href="index.php?lien=6">Enregistrer et modifier type d'Anime</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Team</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="index.php?lien=8">Enregistrer et modifier Team</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Contenus</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="index.php?lien=4">Enregistrer et modifier type de fiche</a></li>
<li><a href="index.php?lien=5">Enregistrer et modifier fiche</a></li>
<li><a href="index.php?lien=2">Enregistrer et modifier news</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Apparence</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="index.php?lien=2">Enregistrer et modifier news</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');">Membres</dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
<ul>
<li><a href="index.php?lien=2">Enregistrer et modifier news</a></li>
</ul>
</dd>
</dl>
</div> |
voici mon css :
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
76
77
78
79
80
81
82
83
84
|
<style type="text/css" media="screen">
.essai
{
background:green;
}
#menus {
width: 100%; /* correction pour Opera */
height:30px;
text-align:center;
margin:auto;
vertical-align:top;
margin-left:25px;
}
#menus ul
{
margin:0;
padding:0;
float:left;
position:absolute;
width:7%;
}
dl, dt, dd, ul, li {
list-style-type: none;
margin: 0;
padding: 0;
margin-left:0;
}
dl
{
/*border: 1px solid black;*/
width:15%;
float:left;
margin-top:0;
padding-top:0;
vertical-align:top;
margin-left:0;
}
#menus dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid black;
margin: 1px;
font-size:10pt;
margin:0;
padding:0;
width: 100%;
}
#menus dd {
display: none;
border: 1px solid black;
float:left;
font-size:10pt;
margin-left:0;
}
#menus li a, #menus dt a {
font-size:10pt;
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
background: #eee;
padding:0 5px 0 5px;
width: 100%;
}
#menus li a:hover, #menus li a:focus, #menus dt a:hover, #menus dt a:focus
{
background: #3399ff;
border: 1px solid black;
}
#menus dt:hover
{
background: #3399ff;
}
#menus li
{
border: 1px solid gray;
} |
et j'utilise le doctype suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Merci d'avance de votre aide
