Выпадающее МНОГОуровневое меню Wordpress (вопрос по CSS+JQuery)

Есть сайт на вордпресс с многоуровневой страничной структурой (обратите внимание - не посты, а страницы!). Вот приближение кода меню:

<div id="menuKA">



<UL>



<LI>Элемент 1(первого уровня)</LI>



      <UL>



      <LI>Элемент 1.1(Второго уровня)</LI>

              <UL>



              <LI>Элемент 1.1.1(Третьего уровня)</LI>

              <LI>Элемент 1.1.2(Третьего уровня)</LI>

              <LI>Элемент 1.1.3(Третьего уровня)</LI>



              </UL>

      <LI>Элемент 1.2(Второго уровня)</LI>

      <LI>Элемент 1.3(Второго уровня)</LI>



      </UL>



<LI>Элемент 2(первого уровня)



      <UL>



      <LI>Элемент 2.1(Второго уровня)</LI>

      <LI>Элемент 2.2(Второго уровня)</LI>

      <LI>Элемент 2.3(Второго уровня)</LI>



      </UL>



</UL> 

</div>

ЧТО НУЖНО:

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

Вот что есть на данный момент: функция на Javascript:

jQuery(document).ready(function(){



jQuery("#menuKA li").hover(



function(){



jQuery(this).find('li').show();



},



function(){



jQuery(this).find('li').hide();



}

);





});

и описание css (в нем описаны только верхние уровни):

/*общий стиль блока меню*/

#menuKA {

height: 30px;

background: #4182b8;

margin: 5px 20px 100px 20px;

clear: both;

font-size: 14px;

}



/*стиль ссылок в меню*/

#menuKA li a{

color: #fff;

display: block;

line-height: 27px;

padding: 0 10px;

}

#menuKA li a:hover {

background: #07599d;

text-decoration: none;

}



/*стиль для элементов первого уровня, т.е. дочерних страниц*/

#menuKA li {

list-style: none;

float: left;



}



/*стиль для элементов дочернего меню*/

#menuKA li ul li {

float: none;

background: #1112a8;

display: none;

}



/*стиль для элементов дочернего меню дочернего меню*/

#menuKA li ul li ul li{

float: none;

background: #00b2a8;

}



#menuKA ul {

background: #4182b8;

margin: 0; padding: 0;

position: absolute;

z-index: 10;



}



.current_page_item, .current_page_parent{

background: #07599d;

text-decoration: none;

}

Так вот, при том варианте, что есть сейчас:

1. Все уровни меню выпадают только вниз;

2. Описаны только 1,2,3 уровни (а нужно около 5)

3. При наведении на элемент меню первого уровня происходит сразу выпадение меню всех уровней (это происходит из-за того, что jQuery(this).find('li') находит все дочерние li. Пробовал вместо нее использовать jQuery(this).children, но она вообще li не находит (так как исчет только самых "ближайших" дочерних).

Повторю, что нужно:

1. Уровни должны выпадать попеременно: 2-ой вниз, 3-ий - вправо, 4-ый вниз, 5-й - вправо.

2. Нужно описать все уровни.

3. При наведении должны выпадать только элементы ближайшего дочернего уровня.

Что нужно наглядно:

Вот сайт http://asutpdoc.ru/. Горизонтальное меню, наведите курсор на приборы и на его дочерние, и все станет понятно.

Вопрос: что прописать в javascript и css чтобы получилось то, что нужно?