CSS drop down menus stick once you hit back button

Hi, I’ve been pulling my hair all day trying to figure out why my CSS drop-down menu isn’t working properly.

That is, in the top nav bar, when the user hovers over the “Watches” menu, you click the first item on the drop down list. But then say the user clicks on the Back Button to return to the previous page, the hovered drop-down menu still appears.

[URL=“http://haqart.com/test/index.html”]

Hmm, what browser is that happening in? That doesn’t happen in firefox.

Yes it does on mine :slight_smile:

It happens in my Firefox and safari (PC) but doesn’t happen in Chrome, Opera or IE (I didn’t check on a mac so that may be different).

It happens to all dropdown menus that I’ve looked at as the browser goes back to the last element that had focus which is the item in the dropdown menu that was just clicked.

This seems to be the default behaviour for those browsers and I don’t think you can change it. It’s the same logic that when you click a link down the bottom of a page the back button will take you back to that point on the page and not the top of the page.

The menu will disappear as soon as the mouse is moved on the page though. I don’t really see this as a big issue and as all other dropdown menus are exhibiting the same behaviour then I think you can safely ignore it. :slight_smile:

You could probably set up some javascript to move the focus back to the top of the page when the page unloads. If you need to follow this route then I can move the thread to the js forum.

I suppose maybe it’s not that big of a deal. I had the same issue when I implemented some jQuery tooltips on another page and had to use some Javascript code I found to correct the “sticking” issue.

That being said, I would like to try to have this resolved because I’m not sure if the client will be that crazy about it. And I’m not a programmer/Javascript person by nature, so any recommendations of a bug/hack would be more than appreciated.

Does anyone think this might have something to do with my using the drop-down menu with HTML5 that causes this glitch?

or

Am I running too many scripts on the page and maybe that’s interfering with the drop down? Although that maybe a bit farfetched.

P.S.:
The sticking issue happens on my Mac in Safari and Firefox, but not Chrome.
Ditto for Safari, Firefox on Windows, but not on IE8, IE7, and Chrome.

It’s nothing to do with your menu as it happens to all my basic ones (although you won’t be able to test with that one as the links don’t go anywhere but I made a local one fro testing with destinations in the links and it sticks just like your menu).

I also tried loads of others on the internet and they all did the same. There were a few that didn’t do it and they were ones that had dynamic adverts on the page which were moving the focus to somewhere else.

There was an easy fix for Firefox to move the focus when clicked using onbeforeunload but that’s nor supported in Safari.


<script type="text/javascript">
    window.onbeforeunload = function () {
    document.getElementById('test').focus();
}
</script>
</body>

That needs a named anchor at the top of the page with an id of test. However I don’t think that’s very elegant and there’s likely to be a better way to do this but is beyond my meagre skills.