CSS: Hover en IE

Definamos el problema: Internet Explorer 6 y anteriores NO soportan la seudo-clase "hover" en objetos que no sean links.

ul#nav li ul {
	display: none;
}

ul#nav li:hover ul { /* La seudoclase :hover no funciona en IE6 */
	display: block;
}

En el interesante sitio List Apart apareció hace años el truco Suckerfish Dropdowns. El truco se basa en inyectar los eventos onmouseover y onmouseout a través de javascript para cambiar dinámicamente la clase de los elementos de una lista <LI>.

El truco es ingenioso, pero sucio. Es necesario agregar código javascript, y sólo funciona con los elementos <LI>

Mi propuesta es la siguiente: ejecutar el código javascript que sólo IE es capaz de ejecutar dentro de los estilos CSS. Este hack es genérico y funciona con culaquier clase CSS

ul#nav li ul {
	display: none;
}

ul#nav li { /* sobre este elemento queremos capturar el :hover */
	_iehack1: expression(this.onmouseover = new Function("_iehack=this.className;this.className+=' hover';"));
	_iehack2: expression(this.onmouseout = new Function("this.className=_iehack;"));
}

ul#nav li:hover ul, ul#nav li.hover ul { /* debemos agregar la clase .hover */
	display: block;
}

Aquí va el ejemplo:

Link 1
- Link 1.1
- Link 1.2
- Link 1.3
Link 2
- Link 2.1
- Link 2.2
Link 3
Link 4

Y aquí va el código respectivo:

      hover_menu.html

  1   <html>
  2   
  3   <style type="text/css">
  4   
  5   ul#nav li {
  6   	_iehack1: expression(this.onmouseover = new Function("_iehack=this.className;this.className+=' hover';");
  7   	_iehack2: expression(this.onmouseout = new Function("this.className=_iehack;");
  8   }
  9   
 10   ul#nav li ul {
 11   	display: none;
 12   }
 13   
 14   ul#nav li:hover ul, ul#nav li.hover ul {
 15   	display: block;
 16   }
 17   
 18   
 19   </style>
 20   
 21   <body>
 22   
 23   <ul id="nav">
 24   	<li>Link 1
 25   		<ul>
 26   			<li>Link 1.1</li>
 27   			<li>Link 1.2</li>
 28   			<li>Link 1.3</li>
 29   		</ul>
 30   	</li>
 31   	<li>Link 2
 32   		<ul>
 33   			<li>Link 2.1</li>
 34   			<li>Link 2.2</li>
 35   		</ul>
 36   	</li>
 37   	<li>Link 3</li>
 38   	<li>Link 4</li>
 39   </ul>
 40   
 41   
 42   </body>
 43   </html>