メニュー項目が増減するたびに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制作の機会も増えそうなので そういったことも踏まえ地道に勉強していきたいと考えています。 ありがとうございました。