The website I am presently focusing on is situated at: http://counterbeing.com

The issue I am attempting to solve is the fact that advertising media are your mouse within the "Groups" button, the sub-menu products appear, however disappear before you click them.

I have attempted a number of things. To begin with, I had been trying to define the div the sub menu products are covered with as something which will even trigger the animation, but that does not appear to operate...

This is actually the javascript file I am using to seize both layers. I've it split into 2 layers because one of these is sort of transparent.

$(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"
    })
});
});

So, first factor is you don't have to use two divs if you are using an rgba background around the CategoryButtonHolder.

Next, you are utilizing a mouseout event handler to animate the div support. So any time you mouse leaves the button, you activate the mouseout. Try moving the mouseout handler towards the CategoryButtonHolder.

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

For hover, a pleasant wordpress plugin that solved that type of problem was the hoverintent wordpress plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html you may make it wait and watch for X ms some time and its really smooth then.

HTH.