Submenu disappears after click in Firefox only

Question

I have created a horizontal spry menu which is working fine, but in Firefox the submenu disappears after clicking a submenu item - you then have to roll over the parent menu item to make the submenu visible again. In Safari the submenu remains visible even after clicking an item. I would prefer the menu to behave as it does in Safari. A link to the site is www.jakeharris.ca if anyone can help - look at it in Safari and Firefox to see the differences (not sure how it is in IE!)
Many thanks,
Hillary

Answer 1

That is how the submenu is programmed to work...to hide when you get to the page you call.
Although my Safari did not work the way yours did (I am on XP), I think what you are actually asking about is what I would call "local page indicators." That is, a kind of 'sign' that you are on a specific page.
In your case, for each page, you would show an "open" menu with the appropriate menu list item highlighted with your normal hover color.
There may be a way in the javascript to allow the submenu on a page to be always "on" or open, but I don't know much about javascript, so I can't help with that.
If you have not used a Template to build the pages, it is even easier than fiddling with the javascript, if a tiny bit timeconsuming.
Locally-significant styling is pretty straightforward, in theory.
On each page, replace the class on the top menu item (on the main bar) for that page (right now it will say something like <li><a class="MenuBarItemSubmenu" href="#">Item 1</a> with a new class (you might call it "localpage") so you can make descendant selectors that apply to showing the submenu. Then write styles that cancel the 'hide' technique...get rid of the left: -1000em; for instance. I haven't gone through and worked this through, but it should work. Let me know if you need code; I need to go to breakfast right now, though!
Then make another class to style the individual items for their pages, for instance .local that can be grouped with the hover styles that change the item color when you hover over them:
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible, .local
    background-color: #33C;
    color: #FFF;
On each page, add this class to the menu item that pertains to that page:
<a href="#" class="local">Chasing Wild Horses</a>
on the "Chasing Wild Horses" page, for instance.
This is a pretty subtle and elegant solution to what most people use <h1> heads for. Keep in mind, though, that if you want SEO to understand your page, without a hierarchical text indicator, it might be too subtle, as h1, h2, etc. heads help to indicate levels of importance of content for search engines and screen readers.
But it will look great, nonetheless.
Beth