Jim's Menu Replacement

[CHunt]

I have tried a different approach to the menu problem with the same feel and look as with Jim's Menu. It works in Opera 9, NS 8, FF 2 but not in IE6. I have been researching the net for a solution but having no luck. In IE6 the first level menu is fine, the second level displays when rolledover but text under shows through. The 2nd level does not stay in a hover state past 3 characters and you can't get to the 3rd level which is also semi transparent.
http://home.mindspring.com/~kathy.hunt is where the test page is located. Any help would be appreciated.

[jscheuer1]

This semi transparent stuff is really baffling me. I did a fairly thorough inspection of the page in FF 2, IE 7 and Opera 9. I was looking for filter, opacity, and/or -moz-opacity, but didn't run across them in the markup, styles or scripts. Since you are the author, have you used any of these anywhere in association with that page? If so where?

I even disabled filters in IE and it was still semi transparent. I can't, offhand think of anything else that would be causing it.

[jscheuer1]

The only other thing I can think of is that the z-index style of the menu fly outs may need to be raised, and if so, they must have position relative or absolute, if the don't already.

[CHunt]

It's got me baffled too. I have not used any hidden commands or any command that I know of that would cause it. Just straight CSS markup. I couldn't make it be semi transparent if I wanted too. How did it look in IE7 ? I don't have that particular browser available.

I have tried z-index 101 for level 2 and three but they had no effect. The page was created with Frontpage and the CSS file was done with Notepad. It looks the same in Frontpage.

I was hopeing you had seen it before and had a quick fix like min-height:1 or something.

[jscheuer1]

Well, just adding this style takes care of the 'transparency' problem in IE 6 & 7:

#menu {
position:relative;
z-index:1000;
}

Once that is dealt with, you have something solid to hover over, so the hover problem clears up as well. Remember, z-index has no effect without position relative or absolute and one can sometimes be too selective when applying z-index. It is best to go for the highest up (parent) element that will do the job without messing other things up.

[CHunt]

Thank you John !!!!!!!
I put your fix in the file and it works like a charm. Simple but not intuitive.

CHunt