トップレベルカテゴリーの横型メニューをCSSで作る

Movable TypeトップレベルのカテゴリをCSSを使って横並びに表示してみたいと思います、CSSを使っていろいろな方法でカテゴリーを表示することができますが、お勧めのサイトがあります。
CSS Library Horizontal CSS Menus
このサイトはCSSを利用したタブ型のメニューやアクア風メニューなどサンプル付きで紹介されてます、メニュー以外にページ全体のレイアウトや画像のドロップシャドウ、フォーム関連のCSSなどコードが利用できます。今回使わせてもらうのははMovable Typeのトップレベルカテゴリーを横にレイアウトする横型のメニューです。

利用させてもらったのはPlastic Tabs menuです。CSSはサイトにある「The CSS:」の欄をMovable TypeCSSテンプレートに貼り付けます、メインページテンプレートや、その他のテンプレートには以下を記述します。

<!--横並びカテゴリー-->
<div id="navigation">
<MTIfArchiveTypeEnabled archive_type="Category">
<ul>
<MTTopLevelCategories>
<li>
<a href="<$MTCategoryArchiveLink$>"><span>
<$MTCategoryLabel$></span></a>
</li>
</MTTopLevelCategories>
</ul>
</MTIfArchiveTypeEnabled>
</div>
<!--横並びカテゴリー-->

実際に使用した際、微妙にずれてメニューが表示してしまう場合は上記のタグを改行なしで記述します。