Как сделать чтобы выпадающее меню убиралось не сразу

[adelante]

(решил вынести в отдельную тему)

Есть выпадающее меню, оно находится выше родительского на 30 пикселей (абсолютное позиционирование и "top:-30px;"). И вот, наводим на первую менюшку, "выпадает" вторая, неспеша переводим мышку на вторую, но не успеваем, ибо вторая менюшка пропадает.

В общем, попасть в неё (вторую менюшку) -- это целый аттракцион.

Подскажите, как сделать этот процесс более человеческим?
Какую-то паузу в яваскрипт? Или в стилях что-то накрутить?

Сама менюшка здесь: http://romaadelante.ru/t/test.html

[sysya]

сделайте просто с помощью стилей css

ul:hover {display:block;}

, без jquery
эффектов плавных небудет, зато мучиться не надо
Или такой вариант выпадения:
в стилях так пишем:

ul {display:block; height:0;}

в скрипте так

$('ul').css('display','block').animate({height:'30px', top:'-30px'}, 300);/*при наведении курсора, а када убираем курсор сами догадайтесь как обратно сделать, всё логично*/

[adelante]

Похоже решил я баг выставлением padding: 15px 0 30px 0; у дочернего ul

правда при этом красивая анимация пропала, ну да и хрен с ней, переживем как-нибудь.

[Achilles_sm]

Можно решить путём выставления скорости анимации. Т.е. в родительском блоке ставим hover(
function () {
$("#dmenu").animate({opacity: "1"}, "slow"); //дочерний блок появляется при наведении
$("#dmenu").animate({opacity: "1"}, 5000) //дочерний блок висит 5 секунд
},
function () {
$("#dmenu").animate({opacity: "0"}, "slow"); // дочерний блок гаснет
});

Вся анимация для одного (дочернего в данном случае) элемента выполняется в одной очереди. Поэтому гаснуть блок начнёт только после того, как провисит 5 секунд. Думаю, что этого достаточно для того, чтобы на него попасть мышкой =) Конечно, надо добавить, что при наведении на дочерний блок opacity будет оставаться единицей... Для этого можно сделать clearQueue при наведении на него или stop(). На Ваш выбор...