Category Tab Simple Dropdown Menu

[hockey2112]

This is a result of an IE7 bug which gives a z-index:0; to all positioned elements, thus establishing a new z-index context and making it appear on top of any previous z-indexed element with the same precedence.

I have found a solution to this for the case where the positioning is only for purposes of giving context to normally hidden sub-elements: take the position: relative; out of the normal style rule and put it in the :hover rule. It is only needed in that case, and doesn't interfere with other elements' positions or indexes.

I changed this...

#navCatTabsDropdown li 
{
	float:left;
	position:relative;
}

#navCatTabsDropdown * li:hover ul 
{
	visibility:visible;
	background-color: #ffffff;
	border: 2px outset;
	white-space:nowrap;
}

To this...

#navCatTabsDropdown li 
{
	float:left;
}

#navCatTabsDropdown * li:hover ul 
{
	visibility:visible;
	background-color: #ffffff;
	border: 2px outset;
	white-space:nowrap;
	position:relative;
}

But it did not fix the issue. It actually caused more damage in IE7, and also broke the nav bar's layout in Firefox when you hover over a link in the NavCatTabs. Any other ideas?