横並びメニュー

幅900px高さ80pxの横並びバナーを作成しました

HTML

<div id="nav">
<ul>
<li id="menu1"><a href="#">メニュ−１</a></li>
<li id="menu2"><a href="#">メニュ−２</a></li>
<li id="menu3"><a href="#">メニュ−３</a></li>
<li id="menu4"><a href="#">メニュ−４</a></li>
<li id="menu5"><a href="#">メニュ−５</a></li>
</ul>
</div>

CSS

#globalnav li{
  float: left;
  width: 180px;
  white-space:nowrap;
  text-indent: 100%;
  overflow: hidden;
}

#nav a {
  display: block;
  width: 100%;
  height: 80px;
  background-image: url( 画像url );
  background-repeat: no-repeat;
}
#menu1 a { background-position: 0 0;}
#menu2 a { background-position: -180px 0;}
#menu3 a { background-position: -360px 0;}
#menu4 a { background-position: -540px 0;}
#menu5 a { background-position:  -720px 0;}

#nav a:hover {
  background-image: url( 画像url );
  background-repeat: no-repeat;
}
#menu1 a:hover{ background-position: 0 -80px;}
#menu2 a:hover { background-position: -180px -80px;}
#menu3 a:hover { background-position: -360px -80px;}
#menu4 a:hover { background-position: -540px -80px;}
#menu5 a:hover { background-position:  -720px -80px;}