リスト項目の要素が所定の位置で跳ね返り、互いに重なり合わないようにする必要があります。
私が言いたいことの JSFiddle を作成しました: http://jsfiddle.net/RGvjj/
なぜ要素がそうしているのか、それを修正するために何をする必要があるのか について、誰かが私にアドバイスできますか?
inlineからディスプレイを取り外して、代わりに<li>使用してみてください。float:left
試してみてください: http://jsfiddle.net/RGvjj/1/
#navigation li {
font-size: 20px;
margin-left: 10px;
padding-left: 10px;
border-left: 3px solid #1161A5;
color: #ffffdd;
text-decoration: none;
float:left;
}
編集:説明すると、要素をアニメーション化すると、jQuerydisplayがblock. blockつまり、動作しない要素 (the <a>) 内のinline要素 (the ) で終わっていました<li>。
を使用するfloat:leftと、<li>はその表示を保持しblock、 が有効に<a>なりますblock。