CssSpriteです。サイトの読み込みを早くするときなどによくつかわれる技術ですね。
かなり今さら感がありますがたまにCssSpriteでメニューを作ろうとすると決まって忘れてしまっています。そこで今さら感全開ですが備忘録として残しておこうと思います。

htmlのソースはこんな感じ。メニューが6あるとします。

<ul id="global-nav">
<li class="nav-01"><a href="#"></a></li>
<li class="nav-02"><a href="#"></a></li>
<li class="nav-03"><a href="#"></a></li>
<li class="nav-04"><a href="#"></a></li>
<li class="nav-05"><a href="#"></a></li>
<li class="nav-06"><a href="#"></a></li>
</ul>

で、cssはこんな感じ。

/*------------------------
global nav
--------------------------*/
#global-nav {
background:url("../img/globalnav.png") no-repeat;
width: 900px;
height: 43px;
margin: 0;
padding: 0;
border: 1px solid #ccc;
}
#global-nav li, #global-nav a {
height: 43px;
display: block;
}
#global-nav li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
.nav-01 { width: 150px; }
.nav-02 { width: 150px; }
.nav-03 { width: 150px; }
.nav-04 { width: 150px; }
.nav-05 { width: 150px; }
.nav-06 { width: 150px; }
.nav-01 a:hover { background:url("../img/globalnav.png") 0px -43px no-repeat; }
.nav-02 a:hover { background:url("../img/globalnav.png") -150px -43px no-repeat; }
.nav-03 a:hover { background:url("../img/globalnav.png") -300px -43px no-repeat; }
.nav-04 a:hover { background:url("../img/globalnav.png") -450px -43px no-repeat; }
.nav-05 a:hover { background:url("../img/globalnav.png") -600px -43px no-repeat; }
.nav-06 a:hover { background:url("../img/globalnav.png") -750px -43px no-repeat; }

各メニューにマウスが当たった時に背景画像を切り替えているようなのでよしとします。