Доброго времени суток. Уважаемые знатоки, подскажите, пожалуйста, такое:
мне нужно сделать горизонтальное выпадающее меню с 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
Будьте добры, помогите.
