横並びサイトマップをリスト要素で構築したいけど..
お世話になります。
現在制作中の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;
}
お礼
indexをすでに作ってホームページがとにかく動いています。あらたにindexを作るのではなくいまあるindexの中に書くものと思いますが、やってみても上手くいきません。いろいろ書いてあるのを見ましたが、具体例を書いていないので素人には無理です。もう少し考えてみます。たてに並べてクリックしたら飛ぶようには出来ています。ちょっとしたことで横並びになるのでしょうね。もう少し勉強します。
補足
上記HTML/CSSをindexではなく、それを表示しているページのソースにコピーしました。そして４つ(例）あるリンクHTMLをLiで囲みました。すると何と４つが横並びになりました。理屈は私にはわかりませんがとにかく目的が達成出来ました。アドバイス有り難うございました。素人なりに執念でやりました。嬉しいです。ありがとうございました。