проблема с вложенные li

[Bingo]

Проблема такова,

<ul class="main">

<li>Главная</li>

<ul>

<li>Подменю</li>

<li>Подменю</li>

</ul>

<li>Главная</li>

<ul>

<li>Подменю</li>

<li>Подменю</li>

</ul>

</ul>

ul.main li {

list-style:none;

background:url(/images/menu_background.jpg) no-repeat;

color:#000000;

font:11px arial;

padding-left:15px;

margin-top:10px;

margin-left:5px;

position:relative;

}

ul.main ul li {

list-style:square;

padding-left:0px;

background:none;

color:#bcbec0;

margin-top:0px;

}

как только я первому даю высоту 22px (высота фона, у меня сразу подпункты почему-то под другими пунктами)и не знаю даже как быть...

[Gaspode]

<li>Главная</li>
<ul>
<li>Подменю</li>
<li>Подменю</li>
</ul>

Так нельзя.

<li>Главная
   <ul>
      <li>Подменю</li>
      <li>Подменю</li>
   </ul>
</li>

Вот так можно.

[Veseloff]

как только я первому даю высоту 22px (высота фона, у меня сразу подпункты почему-то под другими пунктами)и не знаю даже как быть...

Если первому дать то второму наследуется селектор тоже так как так и должно быть под всеми пунктами и другими тоже. Я понятно объяснил?

[Bingo]

а как можно обойти это? или совсем никак?

[SelenIT]

Насколько я понял, тут проблема в том, что height фиксирует высоту всех пунктов верхнего уровня — в т.ч. тех, у которых есть подпункты. И в итоге эти подпункты наезжают на нижестоящие главные пункты.

Может, вместо height попробовать min-height использовать?

[Bingo]

SelenIT, спасибо большое! помогло!!!