Pourquoi ce texte apparaît-il à gauche dans Webkit?

Question

Peut-être que quelqu'un a déjà vu ça? Lorsque vous passez la souris sur le texte "Première liste" et "Deuxième liste", le texte apparaît quelques pixels vers la gauche. Cela ne se produit que dans les navigateurs Webkit. Testé dans Chrome sur Linux et Mac, Safari sur Mac et navigateur Android. Voici le code. J'ai aussi fait un violon: http://jsfiddle.net/XzVLt

#navigation { 
    line-height:30px; 
    height:30px; 
    clear:left; 
    text-align:left; 
    position:relative; 
} 

#navigation li { 
    padding:0 5px; 
    margin-left:-1px; 
    width:100px; 
    text-align:center; 
    float:left; 
    display:inline; 
} 

#navigation ul ul { 
    display:block; 
    position:absolute; 
} 

#navigation li ul { 
    margin-left:-5px; 
    padding-right:10px; 
} 

#navigation li ul li { 
    margin-right:-2px; 
    text-align:left; 
    line-height:15px; 
    padding:5px; 
    clear:both; 
    width:100%; 
} 

#navigation ul li { 
    list-style:none; 
} 

#navigation ul li { 
    float:left; 
    list-style:none; 
} 

#navigation li ul { 
    display:none; 
} 

#navigation li:hover ul { 
    display:block; 
} 

#navigation a { 
    font-size: 0.8em; 
} 

#navigation li li a { 
    display:block; 
    margin-left:10px; 
    text-indent:-10px; 
} 
​ 

<div id="navigation"> 
<ul> 
    <li> 
     First list 
     <ul> 
      <li><a href="#">Item</a></li> 
      <li><a href="#">Item</a></li> 
      <li><a href="#">Item</a></li> 
     </ul> 
    </li> 
    <li> 
     Second list 
     <ul> 
      <li><a href="#">Item</a></li> 
      <li><a href="#">Item</a></li> 
      <li><a href="#">Item</a></li> 
     </ul> 
    </li> 
</ul> 
</div>​ 

Answer 1

Je devine qu'il a quelque chose à voir avec vos marges et le remplissage qui entre en jeu dès que vous changez le menu déroulant de l'affichage: aucun pour afficher: bloc J'utilise la méthode des poissons-suceurs pour les menus déroulants; vous pouvez facilement l'implémenter dans votre méthode. Il suffit de changer la façon dont vous phase dans le contenu déroulant comme suit:

Remplacer ...

#navigation li ul { 
    display:none; 
} 

#navigation li:hover ul { 
    display:block; 
} 

... avec ...

#navigation li ul { 
    position:absolute; 
    left:-999em; 
} 

#navigation li:hover ul { 
    left:auto; 
} 

Les tests rapides dans Firefox et Safari - ça marche très bien ... vous aurez besoin de JS pour créer un élément pour remplacer le pseudo li: hover ou ça ne marchera pas dans IE.

En savoir plus sur la méthode ici http://htmldog.com/articles/suckerfish/dropdowns/