Menú con CSS avanzado

Aviso: no... No has perdido visión, así, de repente.

Eso fue lo primero que pensé cuando pasé el ratón sobre el menú-ejemplo de designs.com: Produce un curiosísimo efecto de "nublado" en las tabs que no están bajo el ratón, mientras éste pasa sobre otra cualquiera otra de ellas.
Basta que probéis para entender lo que digo. Esta prueba y la tipográfica, podéis verlas en mi blog de pruebas

Aunque no es suficientemente ancha mi plantilla para dar cabida a todo el menú a lo largo, vale para que veáis el efecto que os comento.

Se hace con unas imágenes para las entradas del menú, y el secreto, para variar, está en ellas y el resto del css:

.- CSS:

/*===============================================================



N A V I G A T I O N



=================================================== =NAVIGATION */



#main_nav { list-style: none; margin: 0; padding: 0; }



#main_nav:hover li a#webdesign { background-position: -280px; }

#main_nav:hover li a#home { background-position: -206px; }

#main_nav:hover li a#graphicdesign { background-position: -340px; }

#main_nav:hover li a#contact { background-position: -232px; }

#main_nav:hover li a#about { background-position: -242px; }

#main_nav:hover li a#seo { background-position: -540px; }





/* ACCESSIBLE ROLL OVERS */

#main_nav li { float: left; }

#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }



#home { background: url(http://.../images/navigation/home.gif); width: 103px; }

#home:hover { background: url(http://.../images/navigation/home.gif) 0 0 !important; }

#home.active { background: url(http://.../images/navigation/home.gif) -103px 0; }



#about { background: url(http://.../images/navigation/about.gif); width: 121px; }

#about:hover { background: url(http://.../images/navigation/about.gif) 0 0 !important; }

#about.active { background: url(http://.../images/navigation/about.gif) -121px 0; }



#webdesign { background: url(http://.../images/navigation/webdesign.gif); width: 140px; }

#webdesign:hover { background: url(http://.../images/navigation/webdesign.gif) 0 0 !important; }



#graphicdesign { background: url(http://.../images/navigation/graphicdesign.gif); width: 170px; }

#graphicdesign:hover { background: url(http://.../images/navigation/graphicdesign.gif) 0 0 !important; }

#graphicdesign.active { background: url(http://.../images/navigation/graphicdesign.gif) -170px 0; }



#seo { background: url(http://.../images/navigation/seo.gif); width: 281px; }

#seo:hover { background: url(http://.../images/navigation/seo.gif) 0 0 !important; }

#seo.active { background: url(http://.../images/navigation/seo.gif) -260px 0; }



#contact { background: url(http://.../images/navigation/contact.gif); width: 116px; }

#contact:hover { background: url(http://.../images/navigation/contact.gif) 0 0 !important; }

#contact.active { background: url(http://.../images/navigation/contact.gif) -116px 0; }

.- HTML:

<ul id='main_nav'>

<li><a accesskey='3' href='index.html' id='home' title='Home Page'>Home Page</a></li>

<li><a accesskey='4' href='about-us.html' id='about' title='About 3.7 Designs'>About Us</a></li>

<li><a accesskey='5' class='active' href='web-design.html' id='webdesign' title='Web Design and Development'>Web Design</a></li>



<li><a accesskey='6' href='graphic-design.html' id='graphicdesign' title='Graphic Design and Marketing'>Graphic Designs</a></li>

<li><a accesskey='7' href='keyword-optimization/michigan-seo.html' id='seo' title='Search Engine Optimization and Marketing'>Search Engine Optimization SEO</a></li>

<li><a accesskey='8' href='ann-arbor-marketing.html' id='contact' title='Contact Us'>Contact Us</a></li>

</ul> <!-- end main_nav -->



<br class='clear'/>

Curiosísimo el efecto, sí señor...