1

純粋な CSS ドロップダウン メニューを作成しようとしていますが、奇妙なバグが 1 つあります。ページが読み込まれると、メイン メニュー バーのテキストがわずかに右にオフセットされます。ページが変更されるか、メニュー項目がマウスオーバーされると、左にジャンプして戻ります。
これには、右クリック>要素の検査が含まれ、何が起こっているのかを見つけるのが非常に難しくなります.

その例を次に示します: http://jsfiddle.net/m75p3/1/

ご覧のとおり、読み込み時には間違った位置にありますが、数ミリ秒後に正しい位置にジャンプします。これは、jsfiddle がページを変更しているためです。独自のファイルからロードした場合、マウスオーバーするまでこのジャンプ動作は発生しません。

理由はありますか？

4

1 に答える 1

2

問題は、'toplink' 要素で 'position:absolute' を宣言したが、左の値を指定していないため、その位置は親の text-align:center ルールによって決定されることです。トランジションが発生すると、レイアウトが崩れて移動します。これを修正するには、li を position:relative として宣言して、それがレイアウトの親になるようにし、'toplink' a 要素に 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 に答える