下記のような単純な階層メニューの作り方を教えていただきたいです。

下記のような単純な階層メニューの作り方を教えていただきたいです。
閉じたり開いたり等はなく、常に下のような感じで表示されるようにしたいです。

スペースを使えばできてしまうのですが、きちんとしたやり方が知りたいので
教えていただけましたら幸いです。


・メニュー1
　　・サブメニュー1
　　・サブメニュー2
　　・サブメニュー3


・メニュー2
　　・サブメニュー1
　　・サブメニュー2
　　・サブメニュー3


『・』の部分にはアイコン画像を表示させたいと思っています。

たて並びに記載していますが、「メニュー1」と「メニュー2」は
横に並べて表示させたいと思っています。
よろしくお願いいたします。

No.2 ベストアンサー 回答者： yambejp 回答日時： 2010/07/30 15:38

横並びにするときはたいていfloatを使います。

floatすると幅がわからなくなるので、明示的にwidthを指定するとよいでしょう。
ただしfloatした場合はどこかで、clear処理をいれる必要があります

<style>
#menu>li{
float:left;
width:200px;
}
</style>
<ul id="menu">
<li><div>メニュー1</div>
<ul>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</li>
<li><div>メニュー2</div>
<ul>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</li>
</ul>

No.1 回答者： cotae_bb 回答日時： 2010/07/30 15:12

リストと作る際には<li>タグなどを使用します

http://www.1uphp.com/con1/list/style-url.html
こちらに画像を使用したリストの作成が書いてありましたので、
参考までにどうぞ