横並びサイトマップをリスト要素で構築したいけど..

質問

お世話になります。
現在制作中のWebサイトで、訪問者のためのサイトマップを構築したいと考えています。
ページ数が少ない関係で一般的によく見るサイトマップとは違い、横並びのサイトマップにしたいと考えています。(添付画像のようなデザインです。)
三層式とでもいうのでしょうか、ふたつめの店舗案内の欄に、ふたつに分かれるページ（情報1ページと情報2ページ）があり、さらに情報１～４とコンテンツごとに分類してあるものです。
一層目のコンテンツ下部にはbackground-img no-repeat bottomでドット線の画像を表示させたいです。参考書など見ながら記述してみたのですが、全くといっていいほどいまくいかず、困ってしましました。すべてのリストが左端へ順番に並んでいるようなレイアウトになってしまいました...。
絶対私のHTML/CSSの記述がおかしいことは理解できるのですが、どこを直せばいいのかも分からない状態です。どうかご教授いただけたらと思い、質問させていただきました。
よろしくお願いします。

HTML---

<div id="info_sitemap">
<ul>
<li>TOPページ</li>
<li>店舗案内
<ul>
<li class="01">情報ページその１
<ul>
<li class="03">コンテンツ1</li>
<li class="03">コンテンツ2</li>
<li class="03">コンテンツ3</li>
<li class="03">コンテンツ4</li>
</ul>
</li>
<li class="01">情報ページその2</li>
<li class="01">情報ページその3</li>
</ul>
</li>
<li>ご利用方法
<ul>
　 <li class="02">情報01</li>
　<li class="02">情報02</li>
　 <li class="02">情報03</li>
　　　　<li class="02">情報04</li>
</ul>
</li>
<li>業務案内
<ul>
　 <li class="02">情報01</li>
　<li class="02">情報02</li>
　 <li class="02">情報03</li>
　　　　<li class="02">情報04</li>
</ul>
</li>
<li>ブログ</li>
<li>お問い合わせ</li>
</ul>
</div>

CSS---

#info_sitemap {
width:660px;
}
#info_sitemap ul {
list-style:none;
margin:0;
padding:0;
}
#info_sitemap ul li {
background:url(../images/contact_03.jpg) no-repeat bottom;
font-family:"じゅん 34", "ヒラギノ丸ゴ Pro", monospace, fantasy;
background-color:pink;
width:100px;
}
#info_sitemap ul ul {
list-style:none;
margin:0;
padding:0;
}
#info_sitemap ul ul li.01 {
width:100px;
background-color:green;
}
#info_sitemap ul ul li.02 {
width:100px;
background-color:green;
display:block;
}
#info_sitemap ul ul ul {
list-style:none;
margin:0;
padding:0;
}
#info_sitemap ul ul ul li.03 {
display:block;
float:left;
background-color:blue;
width:100px;
}

回答No.1

ORUKA1951 · ベストアンサー

メニュー項目が増減するたびにHTMLはともかく、CSSを書き直す以外無理です。その場合でもHTMLに文書構造に関係のない属性を忘れずに書き換えなければなりません。
　なぜそうなのかは、とても深くて説明するのが長くなります。
　ざっと思いつく方法は、各項目の文字数が10文字以下、3階層目の文字数は8文字以下、4項目以下に制限した上で、スタイルシートでデザインする。それならごく簡単に下記で良いと思う。
　table的に、2項目目を真横に持ってくるのは無理だと思います。

★HTMLの制約、ウィンドウサイズなど制約が多くユーザビリティ上、よいデザインとは思えません。いっそのこと、単純なリストのままのほうが、はるかにわかりやすくデザインしやすいのではないかと思います。・・スタイルを指定しないほうが優れていると言うことです。ブラウザの表示メニューから「スタイルなし」を選択すると、そのほうがはるかにわかりやすい。それじゃデザインする意味がないですよ。

[HTML]
＿<div id="info_sitemap">
＿＿<!-- 各項目の文字数が10文字以下、3階層目の文字数は8文字以下 -->
＿＿<ul>
＿＿＿<li>TOPページ</li>
＿＿＿<li>店舗案内
＿＿＿＿<ul>
＿＿＿＿＿<li class="01">情報ページその１
＿＿＿＿＿＿<ul>
＿＿＿＿＿＿＿<li class="03">コンテンツ1-1</li>
＿＿＿＿＿＿＿<li class="03">コンテンツ1-2</li>
＿＿＿＿＿＿＿<li class="03">コンテンツ1-3</li>
＿＿＿＿＿＿＿<li class="03">コンテンツ1-4</li>
＿＿＿＿＿＿</ul>
＿＿＿＿＿</li>
＿＿＿＿＿<li class="01">情報ページその2</li>
＿＿＿＿＿<li class="01">情報ページその3</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li>ご利用方法
＿＿＿＿<ul>
＿＿＿＿＿<li class="02">情報01</li>
＿＿＿＿＿<li class="02">情報02</li>
＿＿＿＿＿<li class="02">情報03</li>
＿＿＿＿＿＿＿＿<li class="02">情報04</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li>業務案内
＿＿＿＿<ul>
＿＿＿＿＿ <li class="02">情報01</li>
＿＿＿＿＿<li class="02">情報02</li>
＿＿＿＿＿ <li class="02">情報03</li>
＿＿＿＿＿＿＿＿<li class="02">情報04</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li>ブログ</li>
＿＿＿<li>お問い合わせ</li>
＿＿</ul>
＿</div>

[CSS]
#info_sitemap {line-height:30px;width:900px;}
#info_sitemap ul,#info_sitemap ul li{display:block;list-style:none;margin:0;padding:0;}
#info_sitemap ul ul{margin-left:10em;}
#info_sitemap ul ul ul{position:relative;top:-30px;}
#info_sitemap ul li ul li ul li{display:inline;}
#info_sitemap ul li ul li{height:30px;}
#info_sitemap ul li{border-bottom:dotted red 2px;padding:0.5ex 0.5em;}
#info_sitemap ul li ul li{border-bottom:none;}
#info_sitemap ul li{background-color:rgb(255,200,200);}
#info_sitemap ul li ul li{background-color:rgb(200,255,200);}
#info_sitemap ul li ul li ul li{background-color:rgb(200,200,255);}

お礼

いつもありがとうございます！
教えていただいたスタイルシートとても参考になりました！！
確かにソースは極力シンプルなほうがいいですよね。
今後、こういうWeb制作の機会も増えそうなので
そういったことも踏まえ地道に勉強していきたいと考えています。
ありがとうございました。