テキストでつくる幅が可変のナビゲーション

HTMl

<div class="mod_Gnavi001">
<ul>
<li><a href="#">Menu01</a></li>
<li><a href="#">Menu02</a></li>
<li><a href="#">MenuMenu01</a></li>
<li><a href="#">MenuMenu02</a></li>
<li class="current"><a href="#">MenuMenu03</a></li>
<li><a href="#">MenuMenu04</a></li>
<li class="last"><a href="#">Menu03</a></li>
</ul>
<!--mod_Gnavi001_end --></div>

CSS

/* GlobalNavi_001：テキストでつくる可変グローバルナビゲーション
-----------------------------------------*/
.mod_Gnavi001{
	height:45px;
	background:transparent url('img/menu_off.jpg') repeat-x left top;
}
.mod_Gnavi001 ul{
	width:960px;
	position:relative;
	margin:0 auto;
	line-height:45px;
}
.mod_Gnavi001 ul li{
	float:left;
	font-weight:bold;
	border-left:1px solid #BBB;
}
.mod_Gnavi001 li.last{
	border-right:1px solid #BBB;
}
.mod_Gnavi001 li.current{
	background:transparent url('img/menu_current.jpg') repeat-x left top;
}
.mod_Gnavi001 li.current a:hover{
	background:transparent url('img/menu_current.jpg') repeat-x left top;
}
.mod_Gnavi001 ul li a{
	display: block;
  color:#333;
	padding:0 20px 0 20px;
	text-decoration:none;
}
.mod_Gnavi001 ul li a:hover{
	background:transparent url('img/menu_on.jpg') repeat-x left top;
}