CSSでひとつだけdisplay:none;が適用されない

質問

メニューを画像にし、文字を見えなくするために
display:none;　を用いたのですが、一番上のメニューのみ適用されません。

#menu_1 a span{
display:none;
}
#menu_2 a span{
display:none;
}
～～～～～～～～～～～～～～～
#menu_10 a span{
display:none;
}

としているのですが、
#menu_1のみが適用されません

HTMLタグは

<strong id="menu_1"><A href="#"><span>メニュー１</span></A></strong>
<strong id="menu_2"><A href="#"><span>メニュー２</span></A></strong>
<strong id="menu_3"><A href="#"><span>メニュー３</span></A></strong>
<strong id="menu_4"><A href="#"><span>メニュー４</span></A></strong>
<strong id="menu_5"><A href="#"><span>メニュー５</span></A></strong>
～～～～～～～～～～～～～～～
<strong id="menu_11"><A href="#"><span>メニュー１０</span></A></strong>

このようにしています。
一番上のメニューのみ画像の上に文字が重なるように表示されます。

うまくまとめることができませんでしたが、
どなたか宜しければ教えて頂けるとうれしいです。

回答No.1

yambejp · ベストアンサー

断言はできませんが、同じ構造で一つだけ挙動がおかしいので
あればおそらくタイプミスなどの問題かと。
今回の書き込みにもタイプミスがあるようですし、
再度見なおしてみてはいかがでしょうか？

お礼

スペルミスではなく、その上に余計な一文が入っていました。
ありがとうございました。