Menù Rollover in puro Css senza pre-load

In un precedente articolo in cui si realizzava un menu rollover in puro css, abbiamo lasciato in sospeso il problema iniziale del pre-load. Vediamo con l’utilizzo di un piccolo trucco Css come puoi risolvere il problema.

Vediamo quindi in pratica come si realizza, analizzando l’esempio:

#menu li {width:100px; height:60px; float:left; background-position:top}
#menu li:hover {background-position:bottom}
#menu a {width:100px; height:60px; line-height:60px; display:block; vertical-align:middle}
.home {background-image:url(menu_01.jpg);}
.works {background-image:url(menu_02.jpg);}
.blog {background-image:url(menu_03.jpg);}
.email {background-image:url(menu_04.jpg);}

<ul id=”menu”>
<li class=”home”><a href=”#”></a></li>
<li class=”works”><a href=”#”></a></li>
<li class=”blog”><a href=”#”></a></li>
<li class=”email”><a href=”#”></a></li>
</ul>

Il markup html invece è un semplice elenco che buttà giù la struttura.

Prova a realizzarlo anche tu prendendo spunto da questo esempio di base, e pubblica il link al tuo lavoro sui commenti. Io provvederò a pubblicarlo sul post con il link al tuo Blog.
Se non ci riesci o trovi qualche difficoltà, ti fornirò aiuto.

Vedi anche Menu Rollover in Css