2012-01-31 16 views
0

私のサイトのナビゲーションバーのncptw2012は、「約」ボタンのすぐ下にカーソルを置いた場合を除いて動作します。これにより、不要な重複した画像が突然その下に表示されます。ここでCSSスプライトの下に不要な重複画像が作成される

は、ナビゲーションCSSです:

#navigation { 
    width:960px; 
    height:90px; 
    margin:0 auto 0 auto; 
    padding:0; 
} 
#navigation ul { 
    display:block; 
    float:right; 
    width:960px; 
    height:90px; 
    background:url(img/menu.jpg) no-repeat 0 0; 
    list-style:none; 
    padding:0; 
} 
#navigation ul li { 
    display:block; 
    float:left; 
    height:90px; 
    text-indent:-10000px; 
} 
#about { 
    width:221px; 
} 
#call { 
    width:203px; 
} 
#schedule { 
    width:140px; 
} 
#explore { 
    width:217px; 
} 
#register { 
    width:179px; 
} 
#navigation ul li a { 
    display:block; 
    width:100%; 
    height:100%; 
} 
#about a:hover { 
    background:url(img/menu.jpg) no-repeat 0 -90px; 
} 
#call a:hover { 
    background:url(img/menu.jpg) no-repeat -221px -90px; 
} 
#schedule a:hover { 
    background:url(img/menu.jpg) no-repeat -424px -90px; 
} 
#explore a:hover { 
    background:url(img/menu.jpg) no-repeat -564px -90px; 
} 
#register a:hover { 
    background:url(img/menu.jpg) no-repeat -781px -90px; 
} 
+0

'#navigation ul'に' overflow:hidden'を設定するか、 '#navigation ul a'に明示的に' height'を設定してみてください。 –

答えて

2

あなたが悪いマークアップを参照してください持っている:アンカータグが閉じていない

<h2><a href="#">Chicago, Nov. 2 - 4, 2012, Doubletree Magnificent Mile, Colin Sato, Keynote Speaker</h2> 

を。これにより、ブラウザは試行して修正し、aboutリンクの前に終了タグを追加して、2つのアンカーを表示させます。

+1

2番目の目に感謝します。とても有難い! – brogrammer

関連する問題