css の float:left; を li 適用

質問

css の float:left; を li に適用すると

<ul>
　　<li>AAA</li>
　　<li>BBB</li>
　　<li>CCC</li>
</ul>

●AAA●BBB●CCC
のような横並びにできます

<ul>
　　<li>AAA</li>
　　<li>BBB
　　　　<ul>
　　　　　　<li>aaa</li>
　　　　　　<li>bbb</li>
　　　　</ul>
　　</li>
　　<li>CCC</li>
</ul>

このように入れ子の場合
●AAA●BBB　　　　　●CCC
　　　　　□aaa□bbb

のように表示されます

これを
●AAA●BBB●CCC
　　　　　□aaa□bbb

のように、一段目に間を空けないで表示する
CSS の設定を教えてください

よろしく、お願いします

回答No.2

ORUKA1951 · ベストアンサー

＞わかりにくかったと思いますが、aaa、bbbも
＞横に表示したいと思います
　いえ、それも想定して書いてありますよ。
div#contentTable ul li ul li{display:block;}/* 縦に!!横にすると次のulと重なるよ */
　この行を消せばよいだけ。ulの幅が狭いのでliが縦に並ぶので最終的には

div#contentTable{line-height:2em;text-align:center;}
div#contentTable ul{margin:0;padding:0;position:relative;list-style:none;}
div#contentTable ul li{display:inline-block;width:5em;position:relative;z-index:10;}
/* 二階層目のulの位置を指定 */
div#contentTable ul li ul{width:100%;position:absolute;top:2em;left:0;} /* ★ */
div#contentTable ul li ul li{display:block;}/* ★縦に!!横にすると次のulと重なるよ */
/* ★プルダウンにするなら */
/* div#contentTable ul li ul{display:none;}
div#contentTable ul li:hover ul{display:block;}
*/
/* 分かりやすいよう着色 */
div#contentTable ul li ul li{background-color:silver;}
div#contentTable ul li{background-color:lime;}
div#contentTable ul li:hover{background-color:yellow;}

↓

div#contentTable{line-height:2em;text-align:center;}
div#contentTable ul{margin:0;padding:0;position:relative;list-style:none;}
div#contentTable ul li{display:inline-block;width:5em;position:relative;z-index:10;}
/* 二階層目のulの位置を指定 */
div#contentTable ul li ul{width:400%;position:absolute;top:2em;left:0;}

/* プルダウンにするなら */
div#contentTable ul li ul{display:none;}
div#contentTable ul li:hover ul{display:block;}

/* 分かりやすいよう着色 */
div#contentTable ul li ul li{background-color:silver;}
div#contentTable ul li{background-color:lime;}
div#contentTable ul li:hover{background-color:yellow;}

となるだけ
[参考]
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　このページで、[表示]メニューから[スタイル(シート)]を選択して、色々なスタイルを選択してみる。
　ウィンドウ幅を変えたり、印刷プレビューも確認してみる。

　HTMLさえ率直にシンブルに書いておけばスタイルシートでどうにでもなる。

お礼

ありがとうございます

思い通りのもので、助かりました

回答No.1

ORUKA1951

floatじゃないでしょう(^^)
　floatはかって古いIE(IE7)がdisplay:inline-block;に対応していないときの名残

<div id="contentTable">
　<ul>
　　<li>一章</li>
　　<li>二章
　　　<ul>
　　　　<li>１項</li>
　　　　<li>２項</li>
　　　　<li>３項</li>
　　　</ul>
　　</li>
　　<li>三章
　　　<ul>
　　　　<li>１項</li>
　　　　<li>２項</li>
　　　　<li>３項</li>
　　　</ul>
　　</li>
　</ul>
</div>

div#contentTable{line-height:2em;text-align:center;}
div#contentTable ul{margin:0;padding:0;position:relative;list-style:none;}
div#contentTable ul li{display:inline-block;width:5em;position:relative;z-index:10;}
/* 二階層目のulの位置を指定 */
div#contentTable ul li ul{width:100%;position:absolute;top:2em;left:0;}
div#contentTable ul li ul li{display:block;}/* 縦に!!横にすると次のulと重なるよ */
/* プルダウンにするなら */
/* div#contentTable ul li ul{display:none;}
div#contentTable ul li:hover ul{display:block;}
*/
/* 分かりやすいよう着色 */
div#contentTable ul li ul li{background-color:silver;}
div#contentTable ul li{background-color:lime;}
div#contentTable ul li:hover{background-color:yellow;}

補足

ありがとうございます
回答を表示させてみました
章の下の項の部分が縦に表示されました

こちらがサンプルとして、BBBの下にaaa、bbbがあるだけ
わかりにくかったと思いますが、aaa、bbbも
横に表示したいと思います

この点についてないも触れていないの、こちらのミスですが

第一段目の章の部分にマウスオーバー、または」クリックしたとき
第二段目の項の部分が表示されることを考えています

つまり、二章にマウスオーバーで

一章　二章　三章
　　　１項２項３項

三章にマウスオーバーで

一章　二章　三章
　　　　　　　１項２項３項

とそれぞれの章の下に項が横並びで表示されるということをしたいと思います

説明不足ですいませんが
このようなことが可能であれば、教えてください

よろしく、お願いします