IE position de liste horizontale imbriquée CSS

Question

En utilisant une version modifiée de (http://lwis.net/free-css-drop-down-menu/dropdown.simple.linear.html) J'ai créé une liste imbriquée qui descend 3 niveaux. Les niveaux 1 et 2 sont horizontaux et le niveau 3 est vertical (du moins c'est le plan)

Les premier et deuxième niveaux fonctionnent comme prévu dans tous les navigateurs.

Dans IE6, le troisième niveau commence à la fin de son LI parent au lieu de directement au-dessous.

EG:

| Item 1 | Item 2 | Item 3 | 
| Item 2.1 | Item 2.2 | Item 2.3 | 
         | Item 2.2.1 | 
         | Item 2.2.2 | 

devrait être:

| Item 1 | Item 2 | Item 3 | 
| Item 2.1 | Item 2.2 | Item 2.3 | 
      | Item 2.2.1 | 
      | Item 2.2.2 | 

Toute aide dans ce serait rencontré grâce copieux et un verre levé quand je frappe la pub;)

Tous code ci-dessous

jQuery

$(document).ready(function(){ 

    if($("ul.dropdown").length) { 
     $("ul.dropdown li").dropdown(); 
    } 

}); 

$.fn.dropdown = function() { 

    return this.each(function() { 

     $(this).hover(function(){ 
      $(this).addClass("hover"); 
      $('> .dir',this).addClass("open"); 
      $('ul:first',this).css('visibility', 'visible'); 
     },function(){ 
      $(this).removeClass("hover"); 
      $('.open',this).removeClass("open"); 
      $('ul:first',this).css('visibility', 'hidden'); 
     }); 

    }); 

} 

CSS

ul.dropdown { 
    width: 1003px; 
    background-color: #ccc; 
    border: solid 1px #999; 
    position: relative; 
    height: 30px; 
} 
ul.dropdown, ul.dropdown li, ul.dropdown ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul.dropdown li { 
    display: inline; 
    padding: 5px; 
    float: left; 
    line-height: 1.3em; 
    vertical-align: middle; 
} 
ul.dropdown li :hover { 
    color: #000; 
    background-color: #ddd; 
} 
ul.dropdown li:hover > ul { 
    visibility:visible; 
} 
ul.dropdown li a { 
    text-decoration: none; 
    background-color: #dde; 
} 
ul.dropdown ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: -1px; 
    z-index: 598; 
    width: 1003px; 
    display: inline-block; 
    background-color: #ccc; 
    border: solid 1px #999; 
} 
ul.dropdown ul ul{ 
    width: auto; 
    margin: 0 0 0 -10px; 
    border-top: solid 1px #CCC; 
    background-color: #F6F6F6; 
    position: absolute; 
    left: auto; 
} 
ul.dropdown ul ul li { 
    white-space: nowrap; 
    display: inline-block; 
} 

HTML

<ul class="dropdown"> 
    <li><a href="#">Item 1</a> 
    <ul> 
     <li><a href="#">Item 1.1</a></li> 
     <li><a href="#">Item 1.2</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Item 2</a> 
    <ul> 
     <li><a href="#">Item 2.1</a></li> 
     <li><a href="#">Item 2.2</a> 
     <ul> 
      <li><a href="#">Item 2.2.1</a> 
      <li><a href="#">Item 2.2.2</a> 
     </ul> 
     </li> 
     <li><a href="#">Item 2.3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Item 3</a> 
    <ul> 
     <li><a href="#">Item 3.1</a></li> 
     <li><a href="#">Item 3.2</a></li> 
    </ul> 
    </li> 
</ul> 

Answer 1

vraiment, déterminer les questions de style dans IE6 ne devrait pas être même une préoccupation. Les données apparaissent, donc du point de vue le plus technique, le site fonctionne et les données peuvent être récupérées.

Les tracas supplémentaires et le travail de prise en charge d'un navigateur vieux de 10 ans pour satisfaire les 3% d'utilisateurs qui utilisent encore IE6 ne valent pas la peine. Faire un navigateur détecter et recommander fortement les utilisateurs de IE6 mise à niveau vers IE8 ou passer à un autre navigateur.