Drop Down Box Keeps flickering - JQuery and CSS

Question

I am having difficulty with something really basic. I am trying to implement a drop down box with JQuery and CSS. I can not figure out why my drop down box keeps flickering when I hover over the "Products" link.

Here is a demo of what I am working on. http://174.132.101.73/~ree/header/

I would appreciate any help on this.

Edit

Well the code can be found by looking at the source code of the link I gave. The main part you might need that displays/hides the drop-down box is this, alongside CSS:

 $(document).ready(function(){
  $('li.headlink').hover(
   function() { $('ul', this).css('display', 'block'); },
   function() { $('ul', this).css('display', 'none'); });
 });

Answer 1

#header_wrapper has width fixed at 950px, and #logo and #nav are floated within it. Since #logo is 250px, that leaves 700px for what's in #nav (whose elements are also floated).

Everything fits just fine until the 'Products' submenu becomes visible. Then its .headlink becomes much wider, due to the extra content, which pushes the overall size of #nav to where it is forced down to the next "line", below #logo. This is the way floated elements work; they fill up the space horizontally until some block is too big and gets pushed down below the first one.

The flicker results from the fact that :hover is no longer active and the submenu gets hidden. Then everything goes back to the way it was. Except that the mouse pointer is still there, and so now :hover is active again. Repeat.

I'm not sure how I'd fix it, but that appear to me to be what's wrong. Maybe you could alter the way your elements are nested, or don't float the nav section. For a quick fix, you could change the #header_wrapper width to something much bigger, such as 1450px, just to see how the 'Products' submenu is behaving, and work out its kinks.

Answer 2

Well, I have been tackling this issue for the last 15 minutes and have finally found the ACTUAL solution.

I have coded dropdowns in the past, fine, and was wondering why I was now getting this flickering issue as I was using solid code and timeouts.

Well, I figured out I was using the wrong Jquery event. Do not use the jquery HOVER event, instead use the jquery mouseover event and mouseout event. This will solve the HOVER related issues.

Next set up a timeout for hiding and, when showing, clear the timeout and, before hiding, clear the timeout. Set this for however long you want the menu to be there when you scroll out.

If you use the timeout with the hover and you still get flicker, be sure to use mouseover event.

$(".btn").mouseover(function() {
    clearTimeout(this.timeout);
    $(this).addClass("hover"); 
    /* can add class, or manually set menu visible, i prefer using CSS class */
}).mouseout(function() {
    clearTimeout(this.timeout);
    /* clear timeout in case 2 mouseout events fire at same time */
    this.timeout = setTimeout($.proxy(function() {
        $(this).removeClass("hover");
    }, 300));
});

This code should be re-usable to ALL drop downs in your page.