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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : 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
#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 : Sélectionner tout - Visualiser dans une fenêtre à part
$(".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 !!