1

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

这是一个例子：http: //jsfiddle.net/m75p3/1/

如您所见，它在加载时处于错误的位置，但在几毫秒后跳转到正确的位置。这是因为 jsfiddle 正在修改页面。如果从它自己的文件中加载，它在鼠标悬停之前不会表现出这种跳跃行为。

任何想法为什么？

4

1 回答 1

2

问题是你已经在你的'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/

于 2012-09-27T14:45:00.347 回答