CSS菜單跳轉到頁面修改的左側？

Question

我想做一個純粹的CSS下拉菜單，但它有一個奇怪的錯誤; 當頁面加載時，主菜單欄中的文本稍微向右偏移。 當頁面被修改或者菜單項被隱藏時，它會跳回到左側。
這包括右鍵單擊>檢查元素，這很難找出發生了什麼。

下面是它的一個例子：http://jsfiddle.net/m75p3/1/

正如你所看到的，它在裝載錯誤的位置，但跳轉到後幾毫秒正確的。這是因爲jsfiddle正在修改頁面。 如果從它自己的文件加載，它將不會表現出這種跳躍行爲，直到被淹沒。

任何想法，爲什麼？

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/