今回作ったグロナビ用jsは、
今いるページを判定してロールオーバーさせた状態にさせときつつ、他のメニューのロールオーバーもちゃんと出来るようにするものです。
どこにでも落ちてそうなjsだけれども、背景と画像どちらでも行けるものを作ってみたいってだけで作っちゃいました笑
実務ではまだこのjsを使ってないからこれから改善するかもだけど、せっかく作ったから書いちゃいます笑

今回作ったjsはこちら

// グロナビのロールオーバー
$(function glonavi() {
	var href      = location.pathname;
	var links     = $("#navi a");
	var linkImage = links.find("img");
	links.each(function() {
		var naviLink  = $(this).attr("href");
		if (naviLink.indexOf(href) != -1) {
			if (!href == "/" || !href == "./") {
				$(this).parent().addClass("active");
			}
		}
	});

	// グロナビが画像のとき
	if (linkImage != ""){
		var activeCheck = $("#navi .active img");
		activeCheck.attr("src", activeCheck.attr("src").replace('_off', '_on'));
		activeCheck.addClass("current");
		linkImage.each(function() {
			$(this).hover(function(){
				$(this).attr("src", $(this).attr("src").replace('_off', '_on'));
			}, function(){
				if (!$(this).hasClass("current")) {
					$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
				}
			});
		});
	}
});

若干複雑に見えるけど（え、見えない？　、、、ですよね〜）

やってることはすごく簡単です！

HTMLとCSSの書き方

/* 背景でロールオーバーする場合 */
<nav id="navi" class="clearFix">
	<em><a href="/test01.html">メニュー1</a></em>
	<em><a href="/test02.html">メニュー2</a></em>
	<em><a href="/test03.html">メニュー3</a></em>
	<em><a href="/test04.html">メニュー4</a></em>
</nav>

/*画像でロールオーバーする場合 */
<nav id="navi" class="clearFix">
	<em><a href="/test01.html"><img src="/images/menu1_off.jpg"></a></em>
	<em><a href="/test02.html"><img src="/images/menu2_off.jpg"></a></em>
	<em><a href="/test03.html"><img src="/images/menu3_off.jpg"></a></em>
	<em><a href="/test04.html"><img src="/images/menu4_off.jpg"></a></em>
</nav>

/* 背景、画像共通 */
#navi{
	width:900px;
	margin:0 auto;
}
#navi em{
	float:left;
	width:25%;
/* 以下画像用 */
	background:#aaa;
	font-size:24px;
	text-align:center;
	font-style:normal;
}
#navi em.active,
#navi em:hover,
#navi em.active a,
#navi em:hover a{
	background:#eee;
	text-decoration:underline;
	color:#f00;
}
#navi em a{
	display:block;
	border-left:#fff 1px solid;
	border-right:#fff 1px solid;
	text-decoration:none;
	color:#fff;
}

注意点は
・グロナビを囲ってるボックスのIDに「navi」をつける
・リンクの前を「em」や「div」で囲ってあげる
・背景でメニューをロールオーバーさせる場合はcssで「active」用を書く
・画像でメニューをロールオーバーさせる場合は画像の拡張子の前に「_off」と「_on」のものを準備する
多分ぐらいです笑！

あ、clearFixはfloatを解除するやつだよ！
（知ってる？　いや、一応ね？）

こんなもんだと思います！
また何か作り替えたりしたらこの記事に多分乗っけます笑！