Menú con errores de validación CSS

[Apolo]

Hola!

Creo que es la primera vez en años que publico un mensaje para solicitar ayuda en Foros del Web y espero contar con suerte.

Tengo un pequeño inconveniente de validación de código CSS con un menú desplegable en este sitio:

http://jigsaw.w3.org/css-validator/v...teralta.com%2F

Y este es el código de ese archivo dropdown.css

Código:

#nav {
	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;
	height:3.1em;
	border-right:0.1em solid #ff7800;
}

#nav li a {
	text-decoration:none;
	display:block;
	float:left;
	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;
	line-height:1.6em;
	color:#FFF;
	font-weight:bold;
	padding:0.5em 2em;
	border-right:0.1em solid #F90;
}

#nav li a:hover {
	background:#F90 url(../images/nav_bg_over.gif) bottom repeat-x;
}

#nav li {
	float:left;
	font-size:1.2em;
	border-right:0.1em solid #ff7800;
	position:relative;
}

/* dropdown */

#nav li li {
	padding:0;
	margin:0;
	height:2.5em;
	line-height:2.5em;
	float:none;
	font-size: 0.9em;
	border:0;
	text-indent:0.2em;
	display:inline;
}

#nav li li a {
	color:#CCC;
	display:block;
	text-align:left;
	width:15em;
	border:0;
	* font-size:0.9em;
	* width:17.2em;
	background:transparent;
	float:none;
}

#nav li ul {
	position:absolute;
	margin-top:2.6em;
	left:-999em;
	background:#242424;
}

#nav li ul li a:hover { 
	color:#FFF; 
	background:#F90 url(../images/nav_bg.gif) bottom repeat-x;
}

#nav li:hover ul, #nav li:hover ul, #nav li.sfhover ul {
	position:absolute;
	left:-999em;
}

#nav li:hover ul, #nav li.sfhover ul {
	left:0;
	width:17.1em;
	padding:0;
	z-index:1000;
}

Me pregunto si hay alguna forma sencilla de modificarlo para que el código quede validado al 100% con la versión 2.1 de CSS.

De antemano, mil gracias.

[astromario]

Precísamente ayer tuve esa misma inquietud, un menú desplegable solo con CSS, sin usar JavaScript. Buscando, encontré la solución aquí:

http://qrayg.com/learn/code/cssmenus

Y la puse en práctica, la puedes ver aquí:

http://astrolabio.com.co/clientes/hablamucho/

Donde podrás ver el menú desplegable y con cero errores de validación tanto de HTML como de CSS. La plataforma en que está hecho es Joomla.

Así que te propongo que uses este código, seguro que no tendrás errores. Eso sí, en IE6 tendrás que usar un JavaScript, porque este bendito no acepta ciertas propiedades del CSS. Todo esto está muy bien explicado en el primer enlace que te mandé.

Èxitos y ya me contarás cómo te fue.

[Mikmoro]

Si necesitas usar esas dos propiedades a la fuerza, una solución es quitarlas y ponerlas directamente en la etiqueta:

<a hre="#" style="*font-size:0.9em;*width:17.2em;">...</a>

Esto valida el xhtml sin problemas.

Si las necesitas sólo para IE6, hay una manera mejor de hacerlo. Si también las necesitas para IE7, me temo que tendrás que hacerlo así.

astromario:
Me parece que eso del menú desplegable con css que necesita javascript para IE6 está un poquillo anticuado

http://www.forosdelweb.com/f53/faqs-...ml#post2453726

Mikel.