0

cssで、1枚の画像でロールオーバーを設定するグローバルナビゲーションの作り方を教えてください。 書籍等で勉強中の初心者です。

一枚の画像を使ってロールオーバーするグローバルナビゲーションを作っています。
動作は正常に動くのですが、どうやってもナビゲーションの位置が右側にずれてしまいます。

ソースは下記です。
背景の位置を変えても、上手くいきません。

そこで、ソースのどの部分が間違っているのか教えて下さい。
よろしくお願い致します。

【XHTML】

<!--全体始-->
<div id="wrapper">

<!--ヘッダー始-->
<div id="header">

<!--ロゴ始-->
<div id="rogo">

</div>
<!--ロゴ終-->

<!--電話番号始-->
<div id="tel">

</div>
<!--電話番号終-->

</div>
<!--ヘッダ終-->


<!--ナビ始-->
<div id="navi">
<ul>
<li id="navi_01"><a href="/">あ</a></li>
<li id="navi_02"><a href="/">い</a></li>
<li id="navi_03"><a href="/">う</a></li>
</ul>
</div>
<!--ナビ終-->

【css】

.body {
font-size: 12px;
line-height: 150%;
color: #444444;
text-align: center;
margin: 0px;
background-color: #FFFFFF;
}

#wrapper {
margin:0 auto;
text-align:left;
width: 420px;
}

#header {
width: 420px;
height: 55px;
text-align: left;
}

#rogo {
float: left;
width: 100px;
height: 55px;
background-image: url(../image/title.gif);
}

#tel {
float: right;
height: 55px;
width: 100px;
background-image: url(../image/title.gif);
}

/*ナビゲーション**************************** */

#navi {
clear: both;
height: 52px;
width: 420px;
background: url(../image/navi.gif) no-repeat;
}

#navi ul {
width: 420px;
}

#navi li {
display: inline;
list-style-type: none;
}

#navi li a {
width: 140px;
height: 52px;
float: left;
display: block;
text-decoration: none;
text-indent: -9999px;
overflow: hidden;
outline: none;
background-image: url(../image/navi.gif);
}

#navi_01 a {
background: url(../image/navi.gif) no-repeat 0px 0px;
}

#navi_02 a {
background: url(../image/navi.gif) no-repeat -140px 0px;
}

#navi_03 a {
background: url(../image/navi.gif) no-repeat -280px 0px;
}
#navi_01 a:hover {
background-position: -0px -52px;
}

#navi_02 a:hover {
background-position: -140px -52px;
}

#navi_03 a:hover {
background-position: -280px -52px;
}

質問者が選んだベストソリューション

Yahoo!知恵袋 5146日前