Question

I have I’m using the dsmoothmenu jquery plugin to generate a toolbar on the top of my page — About a month ago, the page started loading (most of the time) with the first item of the menu bar exposed — as if the user were hovering over the item. I’ve spent hours trying to figure out what’s causing this and haven’t made any progress.

I have another page which uses the same exact markup for the menu, and the same dsmoothmenu js/css, but which doesn’t exhibit the aforementioned behavior. So I figure it’s got somehting to do with perhaps a meta tag, or a style that’s being overwritten. By investigating with the inspector, it seems as though the ul#other_cities element is being given display:block by something, which is overriding the default style of display:none, which should be active until the user hovers over the element.

Here’s an an example of the problem: http://www.foodtrucksmap.com/la/

And a working example: http://www.foodtrucksmap.com/iphone.html

EDIT: So I’ve found that the problem will only manifest itself if the mouse is OUTSIDE of the window when the page finishes loaded. If you keep the mouse hovering over the page, the menu bar will not slide down. This along with the fact that it only seems to happen in chrome, leaves me really confused.

Answer 1

I can see your problem in Chrome when I right-click the link and then “Open link in new tab” or ” … new window” which opens the window in the background. This leaves me with this conclusion.

Google’s Chrome, for some weird reason, positions a “virtual” pointer at position top:1, left:1 which triggers the script. As soon as we bring in the actual “physical” pointer this position takes over and the problem is gone.

As this seems to be a problem with Chrome we can prevent this only with a little trick. I’d say we give the main div#wrapper some breathing room to the left with a margin? Or maybe something to the top like the second example which works!!!