help

As above I’m having two issues:

1. In all browsers, the first list item always takes its hover state no matter which item in the list you hover over.

2. I’m gettiing a nasty flicker in IE6 which won’t seem to go away, even with the solution highlighted above.

Anyone have a solution?

I’m a bit new to css/design, and I am attempting to implement your solution here, but I’ve run into a problem that I can’t seem to fix. I have my menu set up, with a div containing the entire menu and submenu, and everything is labeled from that, as opposed to how you have your main labeled with an id. Everything I have looks fine like I want it except for some reason the very first of the main menu stays highlighted no matter which other list item I am on. However, all of the other list items in the main menu work as they should, only becoming highlighted when I am hovering over them or in their submenu. Any ideas?… I can send you my styling and html in a txt file if you think that would help.

You’re right, it does pull the cached version of the page when I hit back. I’ve tried your code, but I still get the same result. The problem seems to be that the page doesn’t actually execute any of the javascript on the page (whether it be from an included .js file or within script tags in the page’s code) when it displays this cached page.

… as I was writing this, I thought of adding the function call to menuHover() when the page unloads, so it would be forced to ‘deactivate’ the active classes. This apparently worked.

For those who are interested, I just added this to my body tag:
onunload=”javascript: menuHover();”

Along with adding the code Darren provided above, to the menuHover() function.

Sorry about taking so long to reply, been rather swamped with work of late!

@DeviousMrBlonde: Are you looking at the menu in IE6/7? If so, I imagine you’d have to add more code to activate the menu in the lower LI tags, similar to what is done for the top-level elements.

@dbone: I’m not sure exactly how to address the problem you’re seeing in IE7. It could be that the overstate is not being removed when moving the mouse quickly to another top-level element. Perhaps adding some spacing in the CSS between the menu elements? This way the mouse cursor would be over an inactive area, perhaps giving IE7 enough time to remove the hover state.

@banks: Have a link I can take a look at?

@Demetri: My guess is Firefox is pulling a cached version of the page, which would include the “active” class name. I possible solution would be to clear all “active” class names on page load.

The Javascript would look something like this (note, I haven’t tested this, so it may not work):

var listItem = document.getElementById(nav).getElementsByTagName('ul');
for(var i=0;i<listItem.length;i++) {
    var changeStyle = listItem[i].parentNode.getElementsByTagName('a');
    changeStyle[0].className=listItem[i].className.replace(new RegExp("\\s?active\\b"), "");
}

You'd put this somewhere in the "menuHover()" function. Let me know if this does or doesn't work!

Is there something I can put at the top of my html code that will force the javascript to clear any menuhover() function calls? I tried to do something like this already, but had no luck.

Any help would be great since I’ve already employed this menu structure into my project and would love to continue using it without a great deal of backtracking. Thanks!