menus css con rollover sin javascript

Un poco cansado de utilizar siempre los mismos tipos de menus y pensando en crear uno que fuera graficamente bonito, accesible y sin javascript me he encontrado con una serie de menus cuya sencillez, y belleza me han conquistado,podeis verlos aqui.
Acontinuacion una pequeña explicacion de su funcionamiento.
Lo que ocurre con estos menus es que hay una imagen que contiene los dos estados normal, y sobre, gracias al css al posicionarnos sobre el enlace lo que hacemos es cambiar las coordenadas de la imagen, de forma q nos aparezca el segundo estado.
Imagen inicial
#tabsK a {
float:left;
background:url("tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
Imagen sobre (hover)
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}
Como vemos necesitamos dos imagenes, una que sera la de la esquina izquierda, y otra todo lo demas, se hace de esta forma para que la imagen se adapte al texto, hasta cierto limite que sera igual a la anchura de la imagen, pero que son sufientes caracteres.
Lo grande que tiene este menu ademas es que esta creado con una lista, de forma que si quitamos el estilo, seguimos entendiendo q se trata de un menu.
Es en mi opinión uno de los mejores sistemas de menu que he visto nunca.