軽くトースト

ラス"をネストされた単純なフォルダを作成するために使用さmetaphore記事の一覧"を掲載した。 思った私は同じマークアップを適用すると左に手のナビゲーションを再作成する目的は、 CSSを変更し、再度、同じコードを使用します。 だからここに入ります。 'コース、私はあなた日には、 ピクセルサイズを変更すると相対するすべての期待ください。 一層の合理化は 、 CSSも少しすることができます。

HTMLの

<ul id="sitemap">
<li>の<a href="#">項目1 < / a >を< /李>
<li>の<a href="#">アイテム2 < / a >を< /李>
<li>の<a href="#">アイテム3 < / a >を< /李>
4項目<li>の<a href="#" class="open"> < / a >を

<ul>
<li>の<a href="#">サブアイテム1 < / a >を< /李>
<li>の<a href="#">サブアイテム2 < / a >を< /李>
<li>の<a href="#" class="open">サブアイテム3 < / a >を

<ul>
<li>の<a href="#">サブサブ項目1 < / a >を< /李>
<li>の<a href="#">サブサブ項目2 < / a >を< /李>
<li>の<a href="#" class="open">サブサブ項目3 < / a >を

<ul>
<li>の<a href="#">サブ-サブ-サブアイテム1< / a >を< /李>
<li>の<a href="#">サブサブサブ項目2 < / a >を< /李>
<li>の<a href="#">サブサブサブ項目3 < / a >を< /李>
<li>の<a href="#">サブサブサブ項目4 < / a >を< /李>
< / UL仕様>

< /李>

<li>の<a href="#">サブサブ項目4 < / a >を< /李>
< / UL仕様>
< /李>

4項目<li>の<a href="#">サブ< / a >を< /李>
< / UL仕様>
< /李>

<li>の<a href="#">項目5 < / a >を< /李>
<li>の<a href="#">項目6 < / a >を< /李>
< / UL仕様>

CSSの

サイトマップのUL ＃ （
国境：なし;
マージン： 0 ;
リストスタイルのタイプ：なし;
背景色： ＃すなわち、 FFF ;
パディング： 0 ;
幅： 175px ;
フォント：通常の93 ％ verdana 、サンセリフ系;
国境の右： 1px固体＃ f3f1ed ;
カラー： ＃ 333 ;
フロート：左;
マージン： 0 0 1em 0 ;
）

＃李 （縁の下： 0サイトマップのUL ; ）

サイトマップリーのUL ＃ 1 （
背景： （ arrow_black_r.gif ）右ノー＃ DFDBD5を繰り返すのURL ;
カラー： ＃ 000 ;
フォントウェイト：太字;
表示：ブロック;
パディング： 7px 7px 7px 0.5em ;
テキスト装飾：なし;
幅：自動;
）

サイトマップリーのUL ＃ a.open （
背景： ＃ f3f1edのURL （ arrow_brown_d.gif ）ノーを繰り返す右;
色： ＃ 6a2b04 ;
フォントウェイト：太字;
）

サイトマップリーリーのUL ＃ a.open （
背景： ＃ e3e0dbのURL （ arrow_brown_d.gif ）ノーを繰り返す右;
色： ＃ 6a2b04 ;
フォントウェイト：太字;
）

のUL ＃サイトマップリーリーリーa.open （
背景： ＃ dfdbd5のURL （ arrow_brown_d.gif ）ノーを繰り返す右;
色： ＃ 6a2b04 ;
フォントウェイト：太字;
）

のUL ＃サイトマップリーリーリーリーa.open （
背景： ＃ dfdbd5のURL （ arrow_brown_d.gif ）ノーを繰り返す右;
色： ＃ 6a2b04 ;
フォントウェイト：太字;
）

/ * 2番目のレベル* /

サイトマップ ＃のUL のUL （
マージン： 0 0 0 0 ;
パディング： 0 ;
リストスタイルのタイプ：なし;
）

サイトマップリーリーのUL ＃ （背景： （ dot2.gif ）ノーを繰り返す; ）のURL

サイトマップリーリーのUL ＃ 1 （
背景：なし＃ F3F1EDを繰り返す（ arrow_or_r.gif ）のURL 5px ;
カラー： ＃ 000 ;
フォントウェイト：通常;
表示：ブロック;
パディング： 7px 7px 7px 1.3em ;
テキスト装飾：なし;
幅：自動;
）

/ * 3番目のレベル* /

サイトマップのULのULのUL ＃ （
背景： （ dot.gif ）を繰り返す- yのURLを30px 0 ;
）

のUL ＃サイトマップリーリーリー （
背景： （ dot2.gif ）は、 0.5日のURLを繰り返す30px ;
）

サイトマップリーリーリーのUL ＃ 1 （
パディング： 0.5日0 .5日2.5em ;
背景：なし＃ F3F1EDを繰り返す（ arrow_or_r.gif ）のURL 18px ;
）

/ * 4番目のレベル* /

サイトマップのUL のULのUL ＃のUL （
背景： （ dot.gif ）を繰り返す- yのURLを60px 0 ;
）
のUL ＃サイトマップリーリーリーリー （
背景： （ dot2.gif ）のURLを繰り返すノー60px 0 ;
）
サイトマップリーリーリーリーのUL ＃ 1 （
パディング： 0.5日0 .5日3.5em ;
背景：なし＃ F3F1EDを繰り返す（ arrow_or_r.gif ）のURL 31px ;
）
1 ：リンク （
カラー： ＃ 000 ;
背景色：透明;
）
1 ：ホバー （
色： ＃ b64908 ;
）