IE6とXHTML+CSS

質問

外部スタイルシート＋XHTMLでサイトを作成したのですがその際メニュー項目のロールオーバーのオーバー時がIE7だと正常に見えるのですがIE6だとオーバー時の画像が消えてしまいます。その部分の外部スタイルシートとXHTMLをそれぞれ記述するので詳しい方アドバイスお願いします！ちなみにメニューボタンの高さは一緒で幅はそれぞれ違います。
<XHTML>
<div id="sabNavi">
<ul>
<li class="smenu01"><a href="#">サイトマップ</a></li>
<li class="smenu02"><a href="#">プライバシーポリシー</a></li>
<li class="smenu03"><a href="#">お問合せ</a></li>
</ul>
</div>

<外部スタイルシート>
#sabNavi{
width:300px;
}

#sabNavi a{
height:20px;
display:block;
text-indent:-9999px;
}

#sabNavi a:hover{
background-position:0 -20px;
}

.smenu01 a{ background:url(images/btn_sitemap.gif) no-repeat 0 0; width:71px; }

.smenu02 a{ background:url(images/btn_privacy.gif) no-repeat 0 0; width:108px; }

.smenu03 a{ background:url(images/btn_information.gif) no-repeat 0 0; width:55px; }

.smenu01:hover{ background:url(images/btn_over_sitemap.gif) no-repeat 0 0; }

.smenu02:hover{ background:url(images/btn_over_privacy.gif) no-repeat 0 0; }

.smenu03:hover{ background:url(images/btn_over_information.gif) no-repeat 0 0; }

回答No.1

noname#66720

IE6は:hover擬似クラスはアンカー要素にしか対応していないため、動作しなかったのでしょう。

#sabNavi li {
overflow:hidden;
}

#sabNavi a {
height:20px;
display:block;
text-indent:-9999px;
}

#sabNavi a:hover {background-position:0 -20px;}

.smenu01 a {
width:71px;
background:url(images/btn_sitemap.gif) no-repeat 0 0;
}

.smenu02 a {
width:108px;
background:url(images/btn_information.gif) no-repeat 0 0;
}

.smenu03 a {
width:55px;
background:url(images/btn_over_information.gif) no-repeat 0 0;
}

このようにしてみてください。

余談ですが、今の状態ですと画像をオフにしたときに文字が表示できません。
もしIE5.x以下に対応しないのであれば、以下のようにすることをオススメします。

<style type="text/css">

#sabNavi li {
height:20px;
overflow:hidden;
list-style:none;
}

#sabNavi a {
display:list-item;
list-style-position:inside;
white-space:pre;
}

#sabNavi a:hover {
margin-top:-20px;
line-height:60px;
}

.smenu01 {width:71px;}

.smenu01 a {list-style-image:url(images/btn_sitemap.gif);}

.smenu02 {width:108px;}

.smenu02 a {list-style-image:url(images/btn_information.gif);}

.smenu03 {width:55px;}

.smenu03 a {list-style-image:url(images/btn_over_information.gif);}

</style>

<ul>
<li class="smenu01"><a href="#">サイトマップ</a></li><!--
--><li class="smenu02"><a href="#">プライバシーポリシー</a></li><!--
--><li class="smenu03"><a href="#">お問合せ</a></li><!--
--></ul>