Как сделать так, чтобы мой выпадающий список оставался выпадающим?

Question

Сайт, над которым я сейчас работаю, находится по адресу: http://counterbeing.com

Проблема, которую я пытаюсь решить, заключается в том, что при наведении мыши на кнопку «Категории» всплывают элементы подменю, но затем исчезают, прежде чем вы можете щелкнуть их.

Я пробовал разные вещи. Во-первых, я пытался определить div, в который обернуты пункты подменю, как нечто, что также вызовет анимацию, но это, похоже, не работает ...

Вот файл javascript, который я использую для захвата обоих слоев. Я разделил его на 2 слоя, потому что один из них несколько прозрачен.

$(document).ready(function() {
($("div#CategoriesLink")||$("div#CategoryButtonHolder")).hover(function(){
    $("div#navdrop").animate({
        top: "0px"
    })
    $("div#CategoryButtonHolder").animate({
        top: "0px"
    })
}); 
$("div#CategoriesLink").mouseout(function(){        

    $("div#navdrop").animate({
        top: "-162px"
    })
    $("div#CategoryButtonHolder").animate({
        top: "-162px"
    })
});
});

Answer 1

Итак, во-первых, вам не нужно использовать два div, если вы используете фон rgba в CategoryButtonHolder.

Далее вы используете обработчик события mouseout для анимации резервного копирования div.Поэтому каждый раз, когда вы нажимаете кнопку мыши, вы активируете мышку.Попробуйте переместить обработчик мыши в CategoryButtonHolder.

$("#CategoryButtonHolder").mouseout(function(){
   $(this).animate({
       top: '-'+$(this).outerHeight()
   });
)};

Answer 2

Для hover, хорошим плагином, который решил эту проблему, был плагин hoverintent: http://cherne.net/brian/resources/jquery.hoverIntent.html; вы можете заставить его ждать и оставаться в течение X мс времени, и тогда он действительно плавный.НТН.