为什么这个文本会在WebKit中弹出?

也许有人以前见过这个?当您将鼠标悬停在“第一个列表”和“第二个列表”文本上时,文本会在左侧弹出几个像素。这只在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>​