typepadでナビゲーションをヘッダーにする時のカスタムCSS

前日（参照）の続きで、重複もするが、
ナビゲーションを横にしたい。
　
上級者テンプレートを利用してヘッダーにナビゲーションメニューを設置（参照）
　
上級テンプレートで、navbarというモジュールで定義できる。テンプレートになかったので、その名前で新規作成して、以下の例をに貼り付けて適宜直す。

<div id="nav">
<div id="nav-inner">
<ul class="nav-list pkg">
<li class="nav-list-item"><a href="http://biz.typepad.jp/tbb/">ホーム</a></li>
<li class="nav-list-item"><a href="http://biz.typepad.jp/tbb/profile.html">自己紹介</a></li>
<li class="nav-list-item"><a href="http://biz.typepad.jp/tbb/archives.html">過去記事一覧</a></li>
<li class="nav-list-item"><a href="http://biz.typepad.jp/tbb/archives.html">カテゴリー</a></li>
</ul>
</div>
</div>

さらに、bannerテンプレートの最終行に

<$MTInclude module="navbar"$>

を追加する。
　
typepadのマニュアルはググれば色々出てくるけど、レイアウト構造は以下を参考に。
CSSスタイルとクラスリファレンス（参照）
　
そして、navbarというモジュールは、どうやいう構造になってるのか？...ありました。
　
Styling The Navigation Bar With Custom CSS（参照）
　
nav-listというクラスとnav-list-itemというクラスで定義できる、と。

ページ下に他のtipsの参考もあり。なるほど。
　
Add Images to your Navigation Bar（参照）
CSS Hack: Move Your TypePad Navbar Above the Banner（参照）