Actualmente, se pueden construir menúes desplegables totalmente accesibles y configurables, gracias a las listas de HTML y el CSS.

Supongamos que queremos construir un menú con un par de secciones principales, y varias sub-secciones en el interior de cada una de estas. En el código HTML, lo único que tendríamos que hacer es crear una lista <ul> con dos items <li> y dentro de cada uno de los items, anidar otra lista con varios elementos.

<!– Código HTML para el ejemplo de menú desplegable –>
<div class=”desplegable”>
<ul>
<li>Webs Interesantes
<ul>
<li>Santiago Cuenca</li>
<li>Webidea</li>
<li>Dragon Ball Z</li>
<li>Naruto Shippuden</li>
<li>Instalaciones Eléctricas</li>
<li>Saint Seiya</li>
<li>Design Training</li>
<li>Aranjuez</li>
</ul>
</li>
<li>Blogs SEO
<ul>
<li>SEO Femenino</li>
<li>Webidea</li>
<li>Google Dirson</li>
<li>Adseok</li>
<li>Sergio Blanco</li>
<li>SEO Profesional</li>
</ul>
</li>
</ul>
</div>

Simplemente añadiendo un enlace a cada uno de los elementos en la lista, nos quedaría algo así:

Ahora tenemos que aplicar los correspondientes estilos CSS:

/* Le damos un ancho estándar a las listas, un borde, fondo y le quitamos estilos de lista y márgenes */
.desplegable ul{width:150px; border:1px solid #00749e; background:#fff; padding:0; margin:0; list-style-type:none;}

/* Damos un poco de relleno a los items */
.desplegable ul li{padding:.5em;}

/* Le decimos a la lista anidada que no se muestre y le damos estilo a los enlaces */
.desplegable ul li ul{display:none;}
.desplegable ul li a{text-decoration:none; display:block; width:100%; height:100%;}

/* Resaltamos el fondo del item al pasar sobre él y cambiamos el color del texto */
.desplegable ul li:hover{background:#00749E; color:#000;}
.desplegable ul li:hover a{color:#000;}

/* Cuando un item está activo y tiene lista anidada, lo mostramos con display:block */
.desplegable ul li:hover ul{display:block; position:absolute; margin:-20px 0 0 140px;}

Y el resultado final sería:

Obviamente, este es un ejemplo sencillo, y este tipo de menúes son totalmente personalizables. Tan sólo recordar que el uso de CSS para este cometido ayuda más a la optimización de tu web, tanto a nivel de accesibilidad como de indexación en buscadores. Ya todo depende de tu creatividad e imaginación.

Como bien sabemos, Google siempre ha dicho que los enlaces de un sitio web no deben sobrepasar a los 100 en número, entre otras cosas, para que la página no sea considerada una granja de enlaces (link farm), algo a tener muy en cuenta a la hora de la optimización y posicionamiento del contenido de nuestra web.

En dicho post, Matt Cutts reafirmaba esta cuestión, y decía que además la transmisión de Pagerank desde dicha página era casi nula, pero además añadía algo, que si hasta ahora no era ningún secreto, realmente si se solía comentar poco en las comunidades SEO, y es que Google sólo indexa y cachea los 100 primero Kb de una página, por lo que el resto podrían perderse.

Quizá esto pueda no parecerle grave a algunas personas, que opinan que si Google no llega a un enlace desde una página, ya lo hará desde otra, pero lo cierto es que esto puede tener serias complicaciones para alguien demasiado confiado.

Como SEO, siempre te interesará tener tu contenido en la parte superior del código para que Google lo lea antes, y si no eres tú mismo quien maqueta, seguramente le pedirás a tu maquetador que coloque primero el contenido y luego el menú o menúes laterales, cosa que es bastante sencilla de realizar con CSS. Pero si haces esto en la home, que es la primera página a la que se accede, y metes demasiado texto y enlaces en la parte superior, es posible que llegues a un punto en el que tus menúes y categorías internas queden innacesibles, y “et voilá” tu sitio no se indexará, o tardará muchísimo en hacerlo.

Por tanto, cuidado con la cantidad de texto y enlaces que pones en tu contenido. Haz una home con datos precisos y deja un sitemap en formato html siempre bien accesible a los distintos robots de los motores de búsqueda.