もっと簡単に・・
<div class="header">
<div class="nav">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/intro">初めての方へ</a></li>
<li><a href="/staff">スタッフ紹介</a></li>
<li><a href="/price">料金</a></li>
<li><a href="/access">アクセス</a></li>
<li><a href="/FAQ">よくあるご質問</a></li>
</ol>
</div>
</div>
HTML5だと
<header>
<nav>
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/intro">初めての方へ</a></li>
<li><a href="/staff">スタッフ紹介</a></li>
<li><a href="/price">料金</a></li>
<li><a href="/access">アクセス</a></li>
<li><a href="/FAQ">よくあるご質問</a></li>
</ol>
</nav>
</header>
div.header div.nav{text-align:center;height:60px;}
div.header div.nav ol{list-style:none;margin:0;padding:0;font-size:0;}
div.header div.nav ol li{display:inline-block;margin:0;padding:0;width:164px;height:60px;position:relative;}
div.header div.nav ol li a{font-size:16px;display:block;width:100%;height:100%;background:url(images/gnav_on.png) gray;overflow:hidden;line-height:60px;text-decoration:none;}
div.header div.nav ol li a:hover{text-align:left;text-indent:-200px;}
div.header div.nav ol li a[href="/"]{background-position: -164px 0;}
div.header div.nav ol li a[href="/intro"]{background-position: -328px 0;}
div.header div.nav ol li a[href="/staff"]{background-position: -492px 0;}
div.header div.nav ol li a[href="/price"]{background-position: -656px 0;}
div.header div.nav ol li a[href="/access"]{background-position: -656px 0;}
div.header div.nav ol li a[href="/FAQ"]{background-position: -820px 0 ;}
★せっかくスプライトを利用するのでしたら、その目的から当初の画像もスプライトのほうが良いです。
スプライトとは、画像を最初に読み込ませておくことで画像の変更をスムーズに行えるのが利点です。
そうすることで
div.header div.nav ol li a{text-indent:-200px;overflow:hidden;text-align:center;}
div.header div.nav ol li a[href="/"]{background-position: -164px 0;}
div.header div.nav ol li a[href="/intro"]{background-position: -328px 0;}
div.header div.nav ol li a[href="/staff"]{background-position: -492px 0;}
div.header div.nav ol li a[href="/price"]{background-position: -656px 0;}
div.header div.nav ol li a[href="/access"]{background-position: -656px 0;}
div.header div.nav ol li a[href="/FAQ"]{background-position: -820px 0 ;}
div.header div.nav ol li a[href="/"]:hover,
div.header div.nav ol li a[href="/"]:focus{background-position: -164px 60px;}
div.header div.nav ol li a[href="/intro"]:hover,
div.header div.nav ol li a[href="/intro"]:focus{background-position: -328px 60px;}
div.header div.nav ol li a[href="/staff"]:hover,
div.header div.nav ol li a[href="/staff"]:focus{background-position: -492px 60px;}
div.header div.nav ol li a[href="/price"]:hover,
div.header div.nav ol li a[href="/price"]:focus{background-position: -656px 60px;}
div.header div.nav ol li a[href="/access"]:hover,
div.header div.nav ol li a[href="/access"]:focus{background-position: -656px 60px;}
div.header div.nav ol li a[href="/FAQ"]:hover,
div.header div.nav ol li a[href="/FAQ"]:focus{background-position: -820px 60px;}
div.header div.nav ol li a[href="/"]:active{background-position: -164px 120px;}
div.header div.nav ol li a[href="/intro"]:active{background-position: -328px 120px;}
div.header div.nav ol li a[href="/staff"]:active{background-position: -492px 120px;}
div.header div.nav ol li a[href="/price"]:active{background-position: -656px 120px;}
div.header div.nav ol li a[href="/access"]:active{background-position: -656px 120px;}
div.header div.nav ol li a[href="/FAQ"]:active{background-position: -820px 120px;}
とかは無論、先でデザインを変えるのがスタイルシート側ですべてできます。
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
お礼
ご回答ありがとうございます!! おっしゃる通りでした。ずーっと悩んでいたので本当に感激です。 また一つ勉強になりました。本当にありがとうございました。