Que les parece este menu?

[margancia]

Hola muchachos,

Hace unos días pregunté en el foro como veia google un menu hecho integramente con imágenes con sus respectivos alt y en su link el title... Las respuestas fueron, que no afecta mucho la utilización de las imágenes siempre y cuando estén los alt.

Buscando en la web, encontré un menu que me gusta como funciona, y aparte por la forma en que esta hecho aparece el nombre de la seccion en el codigo... que les parece? es un buen menu para optimizar el sitio y no perder la estética en el camino? En vez de usar imágenes directamente en el html, este usa css, con cambio de imagenes onmouseover incluido.

Código HTML:

<ul id="main-nav">
<li class="seccion1">
<a href="seccion1.html" class="nav"><span>Seccion 1</span></a>
</li>
</ul> 

Google ve como algo legal el nombre de la sección oculto dentro de los span? En caso negativo, tiene que decir lo mismo que dice la imágen o puede ser un poco más largo. Ejemplo en vez de que diga "autos" que diga "venta de autos".

CSS:

Código:

ul#main-nav { position:absolute;height:42px; margin:0; padding:0; top:55px; left:25px;}
ul#main-nav li { list-style-type:none; float:left;background-image:url(menu.gif);}
ul#main-nav li a {display:block; text-decoration:none;}
ul#main-nav li a:link {text-decoration:none;}
ul#main-nav li a:visited {text-decoration:none;}
ul#main-nav li a:hover {text-decoration:none;}
ul#main-nav li a:active {text-decoration:none;}

li.seccion1 {background-position:-25px 0;}
li.seccion1:hover, li.seccion1_over {background-position:-25px -23px;}
li.seccion1 a.nav, li.seccion1_over a.nav {width:113px; height:35px;}
li.seccion1 .menu {left:0; min-width:113px}

ul#main-nav li .menu {display:none;}
ul#main-nav li:hover .menu {display:block;}
ul#main-nav li.over .menu {display:block; width:200px;; height:1%;}
ul#main-nav a.nav span {position:absolute; left:-20000px; width:1px; height:1px; overflow:hidden;}

Además para que se vea en IE6 (si no se pone lo siguiente, no hace el efecto hover y no cambia la imagen onmouseover) usa todo lo que hay hasta el final..

Código HTML:

<!--[if lt IE 7]>
<script type="text/javascript">


onLoadFunctions = function() {
	menu();
}

window.onload=onLoadFunctions;
</script>
<![endif]--> 

Esto en un javascript externo:

Código HTML:

menu = function() {
	$("#main-nav li").bind("mouseenter",function(){
                this.className += "_over over";
	}).bind("mouseleave",function(){
                this.className = this.className.replace("_over over", "");
	});
}

Y además jquery, que no me molesta ponerlo ya que lo uso para un efecto de slide.

<script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>

Muchas gracias a todos