Drop-down menus won’t work in Internet Explorer 6 (twentyten theme)

Whatever. Bottom line is that support for IE6 was achieved (hopefully this solution will work for most people).

Dang. Make that partially achieved. Found a flaw with the current solution. Try nesting multiple pages. Although the menus still work, the end result is quite different from menu behavior in normal browsers.

Thus the topic switches back to unresolved until someone proposes a better solution. It’s mostly about tweaking the CSS, really. The main problem is that IE6 doesn’t support the “>” selector.

I myself will probably be using only the parent page → child page formula (2 levels max), so I will not consider the job of perfecting the solution my top priority.

songdogtech, looks good. But I think adapting it would require messing with the script that generates the menu (to add the necessary classes to anchor elements and such). Currently I’m trying to achieve a pure CSS solution which would not require any changes in the theme code.

So here’s an updated solution that fixes the nesting problem entirely for the first five page levels. Yes, I realize that the code is getting bigger and bigger and it isn’t elegant (I gather nothing is elegant with IE6), and it’s all because of the unsupported “>” selector and no good means of replacing it. The good news is that five levels should be enough for most users.

Here we go…

/* Begin IE6 hacks -------------------------------------- */
/* Fix header menu width extending beyond the image */
* html #access .menu-header, div.menu
{
	width: 928px;
}

/* Fix avatars floating over text in comments */
* html .commentlist .avatar
{
	left: -55px;
}

/* Fix menu font */
* html #access
{
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}

/* Fix drop-down menu */
* html body
{
	behavior: url('http://your.site/path_to_wordpress/wp-content/themes/twentyten/csshover3.htc');
}

* html #access li:hover a,
* html #access ul ul:hover a
{
	color:#fff;
	background:#333;
}

/* Page displaying hacks /*

/* Because IE6 doesn't support the child selector ">",		*/
/* providing a good common styling method is rather hard.	*/
/* This is why this hack takes care of only the first 5		*/
/* levels of nesting (it will be OK for ~95% of the users)	*/

/* First level */
* html #access li:hover ul
{
	display:block;
}

* html #access li:hover ul ul
{
	display:none;
}

/* First level highlight fix */
* html #access li:hover ul a
{
	color: #aaa;
}

* html #access li li:hover a
{
	color: #fff;
}

/* Second level */
* html #access li li:hover ul
{
	display:block;
}

* html #access li li:hover ul ul
{
	display:none;
}

/* Second level highlight fix */
* html #access li li:hover ul a
{
	color: #aaa;
}

* html #access li li li:hover a
{
	color: #fff;
}

/* Third level */
* html #access li li li:hover ul
{
	display:block;
}

* html #access li li li:hover ul ul
{
	display:none;
}

/* Third level highlight fix */
* html #access li li li:hover ul a
{
	color: #aaa;
}

* html #access li li li li:hover a
{
	color: #fff;
}

/* Fourth level */
* html #access li li li li:hover ul
{
	display:block;
}

* html #access li li li li:hover ul ul
{
	display:none;
}

/* Fourth level highlight fix */
* html #access li li li li:hover ul a
{
	color: #aaa;
}

* html #access li li li li li:hover a
{
	color: #fff;
}

/* Fifth level */
* html #access li li li li li:hover ul
{
	display:block;
}

* html #access li li li li li:hover ul ul
{
	display:none;
}

/* Fifth level highlight fix */
* html #access li li li li li:hover ul a
{
	color: #aaa;
}

* html #access li li li li li li:hover a
{
	color: #fff;
}

/* Final fix - all further nested items will show up at once */
* html #access li li li li li li:hover ul
{
	display:block;
}

/* Final highlight fix */
* html #access li li li li li li:hover ul a
{
	color: #aaa;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a
{
	color: #fff;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover
{
	color:#fff;
}
/* End IE6 hacks ---------------------------------------- */

Feel free to propose a better, universal solution.

Here’s an alternative solution based on Dean Edwards’ script. It fixes the major problems, however you might want to keep the style hack for fixing the avatars in the comments (everything else can be removed).

To use it download, install and activate this plugin: ie7compatfix.zip

Note that it has a couple of drawbacks:

• Relies on JavaScript;
• Has a severe performance hit.

I will do a little more research on the subject. My goal is to retain the HTC hack performance while fixing the child selector issue in an elegant way.

If I achieve this, I will most likely issue another plugin for IE6 support with 2010 (based on CSS and JavaScript).