JQuery отложенная обработка событий hover
 

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

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

<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 обработчиков) - реализовать попробую сам. Спасибо.

Не могу понять, простая вроде конструкция:

$('.select, .current').hover(function(){
    $(".select_sub").find(".sub").stop(true, true).fadeTo('fast', 1).show();
}, function(){
    $(".select_sub").find(".sub").stop(true, true).delay(1000).fadeTo('fast', 0).hide();
});

Но вторая часть обработчика (плавное исчезновение) принципиально не работает! Подменю все равно исчезает мгновенно...

Подскажите кто знает порядок событий в таком css меню. Что вызывает (или кто вызывает) hover для подменю, если на него курсор вообще не заходит... но css корректно его показывает и прячет.

Уберите вызов .hide()
Анимация на самом деле срабатывает, просто hide скрывает элемент без задержек, несмотря на то, что в очереди ещё есть анимация.