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

リストの項目（テキスト）にあわせて幅は自動に調整されます。

マウスオーバー表示、classをつけることによって現在地表示を背景画像を変更して表示しています。
【2012.09.04改訂】

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;
}