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.