[CSS&JS] 上下２つに分かれてるヘッダーナビゲーションを１つのリストで

次の画像のようなヘッダー部分にある上下に分かれてるナビゲーションメニューを作るとき、

上に並んでるHOME・サイトマップ・個人情報保護方針とその他のulを別にする手法がよくあると思うけど、
普通に１つのリストに書いてクラス振ってfloatとposition駆使して配置するという手もあります。
その方が分けるよりもなんとなく美しい感じがするじゃないですか、XHTMLソース的に考えて。

<ul id="global-navi">
	<li class="home"><a href="index.html" class="home" title="トップページに戻る">HOME</a></li>
	<li><a href="page.html" class="product" title="製品案内">製品案内</a></li>
	<li><a href="#" class="profile" title="企業情報">企業情報</a></li>
	<li><a href="#" class="shop" title="沿革">沿革</a></li>
	<li><a href="#" class="invite" title="採用情報">採用情報</a></li>
	<li class="sitemap"><a href="#" class="sitemap" title="サイトマップ">サイトマップ</a></li>
	<li class="policy"><a href="#" title="プライバシーポリシー">個人情報保護方針</a></li>
	<li><a href="contact.html" class="contact" title="問い合わせ">お問い合わせ</a></li>
</ul>

ul#global-navi {
	position:absolute;
	top:60px;
	right:0;
	width:612px;
	height:32px;
	margin:0;
}

ul#global-navi li {
	float:left;
}

ul#global-navi a {
	display:block;
	width:122px;
	height:32px;
	background-image:url(../images/bg_navi2.png);
	background-repeat: no-repeat;
	background-position:left top;
	text-indent:-9898px;
}
ul#global-navi a.product:hover {background-position:left -32px;}
ul#global-navi a.profile {background-position:-122px top;}
ul#global-navi a.profile:hover {background-position:-122px -32px;}
ul#global-navi a.shop {background-position:-244px top;}
ul#global-navi a.shop:hover {background-position:-244px -32px;}
ul#global-navi a.invite {background-position:-366px top;}
ul#global-navi a.invite:hover {background-position:-366px -32px;}
ul#global-navi a.contact {background-position:-488px top;}
ul#global-navi a.contact:hover {background-position:-488px -32px;}


ul#global-navi a.contact {width:124px;}

/* header top nav */
ul#global-navi li.home,
ul#global-navi li.sitemap,
ul#global-navi li.policy
{
	position:absolute;
	top:-55px;
	right:0;
	float: none;
}
ul#global-navi li.home {right:197px;}
ul#global-navi li.sitemap {right:115px;}
ul#global-navi li.home a,
ul#global-navi li.sitemap a,
ul#global-navi li.policy a {
	width:auto;
	height:19px;
	font-size:85%;
	text-indent:20px;
	line-height:19px;
	color:#000;
}
ul#global-navi li.home a {
	width:62px;
	background:url(../images/bg_nav_home.png) no-repeat left top;
	letter-spacing:0.3em;
}
ul#global-navi li.sitemap a {
	width:77px;
	background:url(../images/bg_nav_sitemap.png) no-repeat left top;
}
ul#global-navi li.policy a {
	width:110px;
	background:url(../images/bg_nav_policy.png) no-repeat left top;
}
ul#global-navi li.home a:hover,
ul#global-navi li.sitemap a:hover,
ul#global-navi li.policy a:hover {color:#c00;}

下が１枚画像で上は背景画像だけで作ってて、下のメニューはfloat、上のメニューはpositionで絶対配置していますが、
floatとpositionが並ぶとIE6で要素が消えるバグが発生して上のメニューが全部消えます。
ul#global-navi liのfloatを消せばバグは発生しないものの、IE6だけに合わせる為に他の真っ当なブラウザが犠牲になるのもおかしな話。

この要素が消えるバグは消えてる要素の真下にブロック要素突っ込めば大抵直るので、
DOM的にアレな感じにはなるけどJavascriptでli以外の要素を作れば誤魔化せます。

mootoolsだとこう。

//for mootools 1.2
window.addEvent('domready', function(){
	if(Browser.Engine.trident && Browser.Engine.version <= 4){
		$$("#global-navi li").each(function(el){if(el.getProperty("class")) el.grab(new Element("div"),"after");});
	}
});
&#91;/js&#93;

jQueryだとこんな感じ？（未検証）
&#91;js&#93;
if($.browser.msie && $.browser.version <= 4)
$("#global-navi li").filter(function () { return  $(this).attr("class") != null; }).after("<div></div>");