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:
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:
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:
$(".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 !!
Partager