If you pull down from the root menu item too slowly, the drop-down menu disappears.

You can see this best at http://dev.healingthresholds.net. Put your mouse over What's New and the drop down appears. Move down slowly. Before you can get to Research Items, the menu disappears. Of course, you can make it work by moving the mouse faster, but it's confusing and off-putting for our (somewhat unsophisticated) viewers. I get the same behavior in Firefox, Chrome, and Safari.

Is there a setting I can change in the CSS that determines how long the drop-down stays down? Any other advice for fixing my menubar?

Thanks in advance.

Comments

ecsmike’s picture

ecsmike commented

Did you receive a fix for this? I am having the same problem.

I went to the site you provided the link for today and in IE7 could not reproduce the problem with that or FF.

Would be very interested in knowing how you fixed it.

Thanks,

Mike

NewZeal’s picture

NewZeal commented

Hi Mike,

Do you use firebug? If you hover over the li tags for the top menu and then hover over the li tags for the dropdown you might notice a gap. It is this gap which causes the problem. I used nice menus and found eventually that the following css was where to focus:

ul.nice-menu ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu ul {
top: 2em;
left: -1px;
border: 0;
margin-right: 0;
}

When I changed 2em to 22px I got the solution. This css determines the position of the dropdown menu li tags relative to the top li tags. Since 2em is relative it was causing problems. Maybe it is too great a distance and was leaving a gap, but also it could vary dependent on other variables, so it was better in the end to use a fixed value here.

Your solution will be something similar.

msumme’s picture

msumme commented

I'm currently experiencing this problem with garland.

And on TOP of that, when i finally get the mouse over the sub-menu, it stays until i'm halfway over the clickable text, and then disappears.

Does anyone have any ideas about that?

add1sun’s picture

add1sun commented
Status: Active » Postponed (maintainer needs more info)

Have you adjusted the position as pointed out in #2?

add1sun’s picture

add1sun commented
Status: Postponed (maintainer needs more info) » Closed (fixed)

No response - closing.

suiGeneris’s picture

suiGeneris commented

Having the same issue as msumme above. This seems to happen with every single drop-menu solution I use, but I've tried the usual CSS fixes (adjusting height, padding, and/or margin of the parent and drop-menus to make sure there is no gap the mouse could "fall into") and cannot seem to get it to stay open. Just like in msumme's comment, the drop-menu closes right as the mouse crosses the bottom edge of the parent list item. Adding padding to the bottom of the parent list item, rather than keeping the menu open continuously as I would expect, results in the drop-menu closing, then reopening.

Clemence.Blazy’s picture

Clemence.Blazy commented
Issue summary: View changes

I had the same problem not only with slow movement, and found the solution thanks to New Zeal.
It's really a matter of position. I had a "gap" between my parent and the drop down.

I added a -5px to my drop down menu. Works perfectly. My CSS looks like that now :

#navigation ul.sf-menu ul li, #navigation ul ul li {
top: -5px;
}