Проблема со вложенными списками

[brainiac]

Имеется такой код:

<ul class="main">
   <li>Item 1</li>
	  <ul class="sub">
		 <li>Item 1</li>
		 <li>Item 2</li>
		 <li>Item 3</li>
	  </ul>
   <li>Item 2</li>
	  <ul class="sub">
		 <li>Item 1</li>
		 <li>Item 2</li>
		 <li>Item 3</li>
	  </ul>
   <li>Item 3</li>
	  <ul class="sub">
		 <li>Item 1</li>
		 <li>Item 2</li>
		 <li>Item 3</li>
	  </ul>
</ul>

В CSS прописано следующее:

.main ul, #main li {
	display: inline;
	margin: 0;
	padding: 0;
}

Как сделать так, чтобы элементы списка с классом .main располагались по горизонтали, а .sub (внутри них) — как обычные списки — по строкам? Иллюстрация желаемого эффекта:

[sigma77]

.main li {float: left;}

.sub li {float: none;}

И код вложенного списка

<ul class="main">
   <li>Item 1
      <ul class="sub">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
</li>
   <li>Item 2
      <ul class="sub">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
</li>
   <li>Item 3
      <ul class="sub">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
</li>
</ul>

Edited April 28, 2010 by sigma77

[brainiac]

sigma77, спасибо!

Правда, в моём конкретном случае это работает совершенно не так, как должно… Код вверху очень упрощённый.

Сейчас буду разбираться, что не так…

[psywalker]

sigma77, спасибо!

Правда, в моём конкретном случае это работает совершенно не так, как должно… Код вверху очень упрощённый.

Сейчас буду разбираться, что не так…

Ну извини дружище, твоих знаний даже на это не хватило вначале, а потом самый большой шаг уже сделан, остальное ты просто обязан доделать сам.