How do I make my drop down remain dropped down?

2 Views

The site I’m currently working on is located at:
http://counterbeing.com

The problem I’m trying to solve is that when you run your mouse over the “Categories” button, the sub-menu items pop up, but then disappear before you can click them.

Read More

I’ve tried a variety of things. For one thing, I was attempting to define the div that the sub menu items are wrapped in as something that will also trigger the animation, but that doesn’t seem to work…

Here is the javascript file I’m using to grab both layers. I have it divided into 2 layers because one of them is somewhat 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"
    })
});
});
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. So, first thing is you don’t need to use two divs if you use an rgba background on the CategoryButtonHolder.

    Next, you’re using a mouseout event handler to animate the div back up. So every time you mouse leaves the button, you activate the mouseout. Try moving the mouseout handler to the CategoryButtonHolder.

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