画像置換でグローバルナビゲーションを作ります。

デモページへopen_in_new

HTMl

<div id="area_nav" class="mod_globalnav">
<ul>
<li class="current-menu-item"><a class="nav01" href="#">メニュー01</a></li>
<li><a class="nav02" href="#">メニュー02</a></li>
<li><a class="nav03" href="#">メニュー03</a></li>
<li><a class="nav04" href="#">メニュー04</a></li>
<li><a class="nav05" href="#">メニュー05</a></li>
</ul>
<!--mod_globalnav_end--></div>

CSS

/* mod_globalnav 画像置換
-----------------------------------------*/
.mod_globalnav{
  height:45px;
}
.mod_globalnav ul{
  margin:0 auto;
  width:750px;
  height:45px;
  overflow:hidden;
  position:relative;
}
.mod_globalnav ul li{
  float:left;
  width:150px;
  height:45px;
  overflow:hidden;  
}
.mod_globalnav ul li a{
  display:block;
  height:45px;
  text-indent: -9999px;
  background-image: url('bg_globalnav.jpg');  
  background-repeat:no-repeat;

}
.mod_globalnav ul li a.nav01{background-position:0px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav01,
.mod_globalnav ul li a.nav01:hover{background-position:0px -45px;}

.mod_globalnav ul li a.nav02{background-position:-150px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav02,
.mod_globalnav ul li a.nav02:hover{background-position:-150px -45px;}

.mod_globalnav ul li a.nav03{background-position:-300px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav03,
.mod_globalnav ul li a.nav03:hover{background-position:-300px -45px;}

.mod_globalnav ul li a.nav04{background-position:-450px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav04,
.mod_globalnav ul li a.nav04:hover{background-position:-450px -45px;}

.mod_globalnav ul li a.nav05{background-position:-600px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav05,
.mod_globalnav ul li a.nav05:hover{background-position:-600px -45px;}