Горизонтальное меню с вертикальными подпунктами

[Aleksson]

Доброго времени суток. Уважаемые знатоки, подскажите, пожалуйста, такое:
мне нужно сделать горизонтальное выпадающее меню с 3 уровнями из обычного ul li списка, вида

пункт1 ______ пункт2 ______ пункт3 ______ пункт4
_подпункт1
_подпункт2
__подпункт2.1
__подпункт2.2
_подпункт3
_подпунктN

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

Вот мой код сейчас:

<script type="text/javascript">
$(document).ready(function(){
	$("ul.sf-menu li>ul").hide();
	$("a span").mouseover(function(){
		$(this).parent().next().toggle(200);
return false;
	});
        $("ul.sf-menu li ul").mouseleave(function(){
		 $("ul.sf-menu li ul").hide();
return false;
	});
});
</script>

вот список :

<ul>
  <li><a></a>
      <ul><li><a></a>
	          <ul>
			  <li><a></a></li>
              <li><a></a></li>
              <li><a></a></li>
			  </ul>
		  </li>
      </ul>
  </li>
  <li><a></a>
      <ul><li><a></a>
	          <ul>
			  <li><a></a></li>
              <li><a></a></li>
              <li><a></a></li>
			  </ul>
		  </li>
      </ul>
  </li>
</ul>

Подробнее на рисунке:
sample.jpg

Будьте добры, помогите.

[trikadin]

<style>
ol li {
 float: left;
 width: 100px;
}
ul li {
 float: none;
 width: auto;
}
li ul {
 display: none;
 margin-left: 0px;
 padding-left: 5px;
}
li:hover ul {
 display: block;
}
</style>
<ol>
<li>bla-bla
 <ul>
  <li> bla-bla, </li>
  <li> bla-bla-bla, </li>
  <li> mr. Freeman </li>
 </ul>
</li>
<li>bla-bla
 <ul>
  <li> bla-bla, </li>
  <li> bla-bla-bla, </li>
  <li> mr. Freeman </li>
 </ul>
</li>
<li>bla-bla
 <ul>
  <li> bla-bla, </li>
  <li> bla-bla-bla, </li>
  <li> mr. Freeman </li>
 </ul>
</li>
</ol>

Раскраску сами добавите. Шестой осёл не поймёт, правда, но там дело поправляется маленьким скриптом.

[Aetae]

Небольшой фикс, который заставит работать так как того хочет тк.

<style>
ol li {
 float: left;
 width: 100px;
}
ul li {
 float: none;
 width: auto;
}
li ul {
 display: none;
 margin-left: 0px;
 padding-left: 5px;
}
li:hover>ul {
 display: block;
}
</style>
<ol>
<li>bla-bla
 <ul>
  <li> bla-bla, </li>
  <li> bla-bla-bla, </li>
  <li> mr. Freeman </li>
 </ul>
</li>
<li>bla-bla
 <ul>
  <li> bla-bla, </li>
  <li> bla-bla-bla, </li>
  <li>bla-bla
    <ul>
     <li> bla-bla, </li>
     <li> bla-bla-bla, </li>
     <li> mr. Freeman </li>
    </ul>
   </li>
  <li> mr. Freeman </li>
 </ul>
</li>
</ol>

Только небольшим скриптом для ie теперь не отделаешься.)

[trikadin]

Да, не дочитал до конца.

[Aleksson]

Всем большое спасибо за ответы, все работает!
Подскажите, если не трудно, что именно под ИЕ писать, а то с хаками у меня не очень?

[trikadin]

Вам нужно написать маленький код, который будет пробегать по всем "li" в списке и ставить им обработчик на mouseover/mouseout. Например, можно модифицировать стиль таким образом:

li:hover>ul, li._over ul{
 display: block;
}

и при наведении мыши на li ставить ему этот класс. Единственное, что плохо - так это то, что ie6 есть ещё и дочерние селекторы не поддерживает. Поэтому вам придётся ещё помучаться. Мой вариант заключается в том, что надо подумать, сколько уровней будет в списке, а потом модифицировать стиль ещё раз:

li:hover>ul, li._over_l1 ul.l1, li._over_l2 ul.l2, li._over_l3. ul.l3{
 display: block;
}

А дальше, в зависимости от уровня вложенности li, ставить ему класс с соответствующим номером.

[Aleksson]

trikadin, большое Вам спасибо, немного поморочился, но уже все работает.