왜이 텍스트는 Webkit에서 왼쪽으로 튀어 나옵니까?

Question

어쩌면 누군가가 전에 이것을봤을까요? "첫 번째 목록"과 "두 번째 목록"텍스트 위로 마우스를 가져 가면 텍스트 왼쪽에 몇 픽셀 팝업됩니다. 이것은 Webkit 브라우저에서만 발생합니다. Linux 및 Mac의 Chrome, Mac의 Safari 및 Android 브라우저에서 테스트되었습니다. 여기에 코드가 있습니다. 나는 또한 바이올린을했다 : 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

나는 그것이 바로이 화면에서 드롭 다운을 변경하면 활동하기 시작하여 마진과 패딩을 함께 할 수있는 뭔가가 같은데요 : 없음 표시 없음 : 블록

나는 드롭 다운에 suckerfish 방법을 사용합니다. 당신은 당신의 방법으로 이것을 쉽게 구현할 수 있습니다.

교체를 파이어 폭스와 사파리에서

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

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

빠른 테스트 ...와 ...

#navigation li ul { 
    display:none; 
} 

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

을 - 다음과 같이 얼마나 당신에게 드롭 다운 내용의 위상을 변경 그것은 잘 작동 ... 당신은 IE를에서 작동하지 않습니다 : 호버 pseudo를 대체하는 요소를 만들려면 일부 JS가 필요합니다.

여기 방법 http://htmldog.com/articles/suckerfish/dropdowns/