Hi,

I have this recurring issue where nice menus just refuses to play nice with Google Chrome. Everytime I use the chrome browser to view my site the top menu dropdown box keeps disappearing the moment my hovering cursor leaves the menu button to choose the dropdown child menu buttons. It is very frustrating.

My designer who styled the menu told me he can't rectify this because google chrome has no CSS hacks. Is there any way around this?

Comments

jalneal’s picture

I'm experiencing the same issue using google chrome, but I did partially solve the issue.
My menus originally had a 10 pixel gap between each item in the dropdown. The idea was to have seveal items with a transparent image float down the screen when going ot the menu item. The problem is that as soon as someone starts dragging the cursor over the gap space, the menu collapses. If you go to your site and pull down really fast, you may be able to skip the gap and it stay open. This behavior did not occur in firefox. It occured after moving down by 2 in IE8 (which is extremely bizarre in my opinion) and it did not occur in Firefox. I hope that this helps. If anyone knows how to get Chrome and IE to not collapse when over the gap, please post - in the meantime, the workaround is to create PNG's with transparent edges if you want to float this down, something a CSS designer should be able to do.

Quick note - this only occurs at the gap between the main menu item and the dropdown itself, once you are inside the pulldown, the problem doesn't occur, so another way is to close the gap at the top only to resolve problems in Chrome. I'm still baffled by the IE8 behavior.

viridisweb’s picture

Same problem here... had to remove the gap between main menu and dropdown.

add1sun’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

mjk5004’s picture

Version: 5.x-1.4 » 7.x-2.0-beta3
Component: CSS » Code

If anyone is still curious I had the same issue in version 7.

I was able to correct the issue on all major browsers (chrome, ie, opera, ff, safari) by using 'padding' instead of a 'margin' under the 'Horizontal (down) menus' section of 'nicemenu.css'.

See below for an example:

ul.nice-menu-down ul {
  left: 0; /* LTR */
  padding-top: 22px;
}

Hope this helps.

inky@inky3d.com’s picture

thanks - using the padding sorted it for me!