[DemonWather]

Доброго Вам времени суток!

Есть двухуровневое меню следующего вида:

<ul class="select"><li><a href="#">Раздел 1</a>
<div class="select_sub show">
    <ul class="sub">
        <li><a href="#">подраздел меню 1.1</a></li>
        <li><a href="#">подраздел меню 1.2</a></li>
        <li><a href="#">подраздел меню 1.3</a></li>
    </ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#">Раздел 2</a>
<div class="select_sub">
    <ul class="sub">
        <li><a href="#">подраздел меню 2.1</a></li>
        <li><a href="#">подраздел меню 2.2</a></li>
    </ul>
</div>
</li>
</ul>

Необходимо чтобы при прохождении по пунктам первого уровня курсором мыши (Раздел 1 -> Раздел 2, событий $(".select").hover()), соответствующее подменю прежде чем исчезнуть, задерживалось на экране на некоторое время (событие (".select_sub").hover()).
Вопрос чисто эргономики - подменю быстро исчезает, прежде чем нерадивый посетитель доведет до него мышкой, проходя по другим элементом первого уровня)

Полагаю, что необходимо увязать два события hover с помощью инструмента hoverIntent... но пока ничего толком не вышло, за неимением опыта:
Мой, нерабочий вариант:

Вот мой вариант:

$(".select").hoverIntent({
        sensitivity: 7,
        interval: 100,
        over: nothing,
        timeout: 0,
        out: outsub
     });
      function outsub(){
               // добавить задержку перед исчезновением подменю
              $(".select_sub").find("sub").delay(500).hide();
      }
      function nothing() {}

Предложите хотя бы алгоритм (структуру jQuery обработчиков) - реализовать попробую сам. Спасибо.