CSS菜单跳转到页面修改的左侧？

Question

我正在尝试制作纯CSS下拉菜单，但它有一个奇怪的错误; 当页面加载时，主菜单栏中的文本略微向右偏移。 当页面被修改或菜单项被鼠标悬停时，它会跳回到左侧 这包括右键单击＆gt;检查元素，这使得很难找到正在发生的事情。

以下是它的示例：http://jsfiddle.net/m75p3/1/

正如你所看到的，它在加载时处于错误的位置，但在几毫秒后跳转到正确的位置。这是因为jsfiddle正在修改页面。 如果从它自己的文件加载，它将不会出现这种跳跃行为，直到moused-over。

任何想法为什么？

Answer 1

问题是你在'toplink'元素上声明了'position：absolute'但没有给出任何左值，所以它们的位置由它们的父对象text-align：center规则决定。当转换发生时，这会扰乱布局，使它们移动。要修复它，你需要将li声明为position：relative，以便它成为布局父级，然后在'toplink'元素上设置left：0。

增加： 要防止文本包装在子菜单中，可以将其空白区域设置为nowrap。

#head ul li  {
    position: relative;
    ...
}

.toplink {
    left: 0;
    ...
}

#head li li, #head li li a {
    white-space: nowrap;
    ...
}

http://jsfiddle.net/m75p3/5/