Why does this text pop to the left in Webkit? - css

Question

Maybe somebody has seen this before? When you hover over the "First List" and "Second List" text, the text pops a couple pixels to the left. This only happens in Webkit browsers. Tested in Chrome on Linux and Mac, Safari on Mac, and Android browser. Here's the code. I also made a fiddle: 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>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>
Second list
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</div>​

Answer 1

I'm guessing that it has something to do with your margins and padding that comes into play as soon as you change the drop-down from display:none to display:block
I use the suckerfish method for drop-downs; you can easily implement this in your method as well. Just change how you phase in the drop-down content as follows:
Replace ...
#navigation li ul {
display:none;
}
#navigation li:hover ul {
display:block;
}
... with ...
#navigation li ul {
position:absolute;
left:-999em;
}
#navigation li:hover ul {
left:auto;
}
Quick tests in Firefox and Safari - it works just fine ... you'll need some JS to create an element to replace the li:hover pseudo or it won't work in IE.
Read more about the method here http://htmldog.com/articles/suckerfish/dropdowns/