Menu déroulant compatible IE6 avec JQuery
BOnjour à tous,
Je me dois de développer un menu déroulant compatible IE6. Pour cela j'utilise JQuery.
Le menu doit avoir les catégories parentes alignés à l'horizontal dans une div. Et lorsque que l'on survole une de ces catégories avec le pointeur de la souris, le navigateur doit me développer en-dessous les catégories enfants associées.
Les noms et liens des catégories sont récupérés en base de données.
Voici la structure HTML de mon menu:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="menu">
<ul class="level1"></ul>
<li class="submenu">Catégories parentes1</li>
<ul class="level2">
<li class="level2_1">Catégories enfants1</li>
<li class="level2_1">Catégories enfants2</li>
<li class="level2_1">Catégories enfants3</li>
</ul>
<ul class="level1"></ul>
<ul class="level1"></ul>
<ul class="level1"></ul>
<ul class="level1"></ul>
</div> |
Ci-dessous le code *css spécific à IE6:
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
| #menu {
width: 100%;
float: left;
border-style: none;
z-index:550;
margin-bottom: -30px;
margin-top: -2px;
}
#menu ul{
list-style: none;
float: left;
margin: 0;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 5px;
padding-right: 5px;
}
#menu a, #menu h2{
color: #FCD10E;
font-size: 10px;
font-family: arial;
font-weight: bold;
}
#menu a:hover {
color: #7e0c0e;
text-decoration: none;
width: 100%;
z-index:550;
}
.level2 {
display: none;
} |
Et mon code JQuery:
Code:
$(".level1").mouseover( function() {$(this).next(".leve1 ul.level2").show(); } );
Si quelqu'un pourrait m'aider car là, j'avoue que je galère pas mal. Je ne vois pourquoi cela ne fonctionne pas sous IE6.
Merci d'avance !! :king:
