Why does my menu bar resort to :hover behavior onload?

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: 开发者_Go百科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.

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!!!

So far I've been able to find out that the onMouseOver event actually fires when the page is loaded.

Since I don't have direct access to the JS files search for the word 'trigger' in all the file (not the jquery ones) and try to find out if it might be calling that at any point.

I will do more research when I have time.

If Nicklas is correct and hover is for some reason firing onload, try wrapping the js of the hover function in your menu javascript with the following conditional:

if(event.target == this) { //Check if the hover event actually targets the object.

//Hover Code//

}

Hope this helps!