¿Que necesidad hay en utilizar javascript cuando la solución está en CSS?
El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado apagado (off) y encendido (on) en dos imágenes:
- menu-izq.gif
- menu-der.gif (Esta imagen tiene que ser bastante ancha para que se adapte a todo tipo de palabras.)

Las imágenes miden de alto 84px, así entonces el menú medirá la mitad de la imagen, por posiciones de background definimos el over.

En nuestra hoja de estilos definiremos lo siguiente:

/**************************************************************************
CSS DOCUMENTO - MENÚ ROLLOVER CSS - 20090317@JCP - DIXSO.NET
***************************************************************************/
#menu 			{float:left; width:100%; font-size:12px; border-bottom:1px solid #2763A5;}
#menu ul 		{padding:10px 10px 0 50px; list-style:none;}
#menu li 		{display:inline;}
#menu a 		{float:left; padding:0 0 0 4px; text-decoration:none; background: url(../imagenes/menu-l.gif) no-repeat left top;}
#menu a span 		{float:left; display:block; padding:5px 15px 4px 6px; font-weight:bold; background:url(../imagenes/menu-r.gif) no-repeat right top; color:#FFF;}
#menu a:hover 		{background-position:0% -42px;}
#menu a:hover span 	{background-position:100% -42px;}

Y en nuestro código html definiremos lo siguiente:

<div id="menu">
  <ul>
    <li><a href="#" title="Enlace 1"><span>Enlace 1</span></a></li>
    <li><a href="#" title="Enlace 2"><span>Enlace 2</span></a></li>
    <li><a href="#" title="Enlace 3"><span>Enlace 3</span></a></li>
    <li><a href="#" title="Enlace 5"><span>Enlace 5</span></a></li>
    <li><a href="#" title="Enlace 6"><span>Enlace grande 6</span></a></li>
	<li><a href="#" title="Enlace 7"><span>Enlace 7</span></a></li>
  </ul>
</div>

Ejemplo aquí.
Descarga aquí.

Versión mejorada del script: aquí.

Este script nos ayudará cuando maquetemos nuestras hojas de estilos y veamos que cada navegador interpretan cosas que no deberían ser así, muy común en IE, sobretodo en la versión 6.

Antes de nada, se necesita la librería jquery para hacer funcionar el script.

Dividimos el script en dos partes, la primera detectamos los navegadores más comunes:

var userAgent = navigator.userAgent.toLowerCase();
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
	chrome: /chrome/.test( userAgent ),
	safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Una vez el script detecta el navegador que estamos utilizando pasaremos los condicionales para escribir una ruta de css u otra:

if ($.browser.chrome) {
	document.write("<link rel='stylesheet' type='text/css' href='css/browsers/chrome.css'>");
	}else if ($.browser.msie){
   		if ($.browser.version>=7){
	  document.write("<link rel='stylesheet' type='text/css' href='css/browsers/ie7.css'>");
   		}else{
	  		document.write("<link rel='stylesheet' type='text/css' href='css/browsers/ie6.css'>");
   		}
	}else if ($.browser.safari) {
    document.write("<link rel='stylesheet' type='text/css' href='css/browsers/safari.css'>");
	}else if ($.browser.opera) {
    document.write("<link rel='stylesheet' type='text/css' href='css/browsers/opera.css'>");
	}else if ($.browser.mozilla) {
    document.write("<link rel='stylesheet' type='text/css' href='css/browsers/firefox.css'>");
	}
	

Por ejemplo, la primera condición dice, si estás utilizando el navegador Chrome añadirá:

<link rel='stylesheet' type='text/css' href='css/browsers/chrome.css'>

Al final de la etiqueta:

</html>

Versión mejorada del script aquí.

Primero, ¿qué son los Sprites? Se trata de una gran imagen que contiene más imágenes pequeñas dentro. Los Sprites eran usados en los videojuegos antiguos de 2D, esos que tenían pocos colores, para tener cargados a sus personajes y mediante sus algoritmos de programación se movían dentro de esta gran imagen y daba como resultado el personaje moviéndose, corriendo, etc. Este es un ejemplo de sprites del famosísimo juego Mario Bros:

CSS Sprites

Leer más…