XHTMLソース

<div id="header">
 <ul>
  <li class="navi_home"><a href="#container" title="ホーム" class="active">ホーム</a></li>
  <li class="navi_business"><a href="#container" title="事業内容">事業内容</a></li>
  <li class="navi_products"><a href="#container" title="製品情報">製品情報</a></li>
  <li class="navi_recruit"><a href="#container" title="採用情報">採用情報</a></li>
  <li class="navi_company"><a href="#container" title="会社概要">会社概要</a></li>
  <li class="navi_contact"><a href="#container" title="お問い合わせ">お問い合わせ</a></li>
 </ul>
<!-- / #header --></div>

CSSソース（全体）

#header {
     height: 127px;
     margin-top: 43px;
     margin-bottom: 20px;
}
 
/*-- __Global Navigation --*/
#header ul,
#header ul li {
     float: left;
}
#header ul {
     width: 600px;
     height: 47px;
     background: url(../img/g_navi.gif) no-repeat;
}
#header ul li a {
     display: block;
     width: 100px;
     height: 47px;
     text-indent: -9999px;
     font-size: 0;
     line-height: 0;
}
#header ul li.navi_home a.active,
#header ul li.navi_home a:focus,
#header ul li.navi_home a:hover {
     background: url(../img/g_navi.gif) no-repeat left bottom;
}
#header ul li.navi_business a.active,
#header ul li.navi_business a:focus,
#header ul li.navi_business a:hover {
     background: url(../img/g_navi.gif) no-repeat -100px -47px;
}
#header ul li.navi_products a.active,
#header ul li.navi_products a:focus,
#header ul li.navi_products a:hover {
     background: url(../img/g_navi.gif) no-repeat -200px -47px;
}
#header ul li.navi_recruit a.active,
#header ul li.navi_recruit a:focus,
#header ul li.navi_recruit a:hover {
     background: url(../img/g_navi.gif) no-repeat -300px -47px;
}
#header ul li.navi_company a.active,
#header ul li.navi_company a:focus,
#header ul li.navi_company a:hover {
     background: url(../img/g_navi.gif) no-repeat -400px -47px;
}
#header ul li.navi_contact a.active,
#header ul li.navi_contact a:focus,
#header ul li.navi_contact a:hover {
     background: url(../img/g_navi.gif) no-repeat -500px -47px;
}

CSSソース【1】

#header ul li.navi_business a.active,
#header ul li.navi_business a:focus,
#header ul li.navi_business a:hover {
     background: url(../img/g_navi.gif) no-repeat -100px -47px;
}

CSSソース【2】

#header ul li.navi_business a.active,
#header ul li.navi_business a:focus,
#header ul li.navi_business a:hover {
     background-image: url(../img/g_navi.gif);
     background-repeat: no-repeat;
     background-position: -100px -47px;
}

• 第4章 ユーザビリティを向上させるCSSデザインの法則