noo i wszystko pięknie działa lecz mam 1 problem i mam odnośnie niego pytanie gdy ktoś wejdzie na stronę i chce wybrać jakąś kategorie z menu to zamiast efektu hove jest 1 czarne tło dopiero później jak wczytaj obrazki jest wszystko oki więc moje pytanie brzmi jak zrobić aby odrazu działał hover . Myślę że chyba zrozumiale to opisałem 
html:
Kod
<div class="menu">
<ul>
<li><a href="index" title="" class="home"></a></li>
<li><a href="onas" title="" class="onas"></a></li>
<li><a href="galleria" title="" class="galeria"></a></li>
<li><a href="oferta" title="" class="oferta"></a></li>
<li><a href="regulamin" title="" class="regulamin"></a></li>
<li><a href="kontakt" title="" class="kontakt"></a></li>
</div>
<ul>
<li><a href="index" title="" class="home"></a></li>
<li><a href="onas" title="" class="onas"></a></li>
<li><a href="galleria" title="" class="galeria"></a></li>
<li><a href="oferta" title="" class="oferta"></a></li>
<li><a href="regulamin" title="" class="regulamin"></a></li>
<li><a href="kontakt" title="" class="kontakt"></a></li>
</div>
css:
Kod
.menu ul { display: block; list-style: none; margin: 0; padding: 0;}
.menu li { float: left; display: block; }
.menu { width: 772px; float: left; display: block; }
/* Przyciski Menu */
.home { width: 173px; height: 56px; background-image: url(images/home-a.gif); display: block;}
.home:hover { width: 173px; height: 56px; background-image: url(images/home-b.gif); display: block; }
.onas { width: 103px; height: 56px; background-image: url(images/onas-a.gif); display: block;}
.onas:hover { width: 103px; height: 56px; background-image: url(images/onas-b.gif); display: block; }
.galeria { width: 103px; height: 56px; background-image: url(images/galeria-a.gif); display: block;}
.galeria:hover { width: 103px; height: 56px; background-image: url(images/galeria-b.gif); display: block; }
.oferta { width: 105px; height: 56px; background-image: url(images/oferta-a.gif); display: block;}
.oferta:hover { width: 105px; height: 56px; background-image: url(images/oferta-b.gif); display: block; }
.regulamin { width: 104px; height: 56px; background-image: url(images/regulamin-a.gif); display: block;}
.regulamin:hover { width: 104px; height: 56px; background-image: url(images/regulamin-b.gif); display: block; }
.kontakt { width: 184px; height: 56px; background-image: url(images/kontakt-a.gif); display: block;}
.kontakt:hover { width: 184px; height: 56px; background-image: url(images/kontakt-b.gif); display: block; }
.menu li { float: left; display: block; }
.menu { width: 772px; float: left; display: block; }
/* Przyciski Menu */
.home { width: 173px; height: 56px; background-image: url(images/home-a.gif); display: block;}
.home:hover { width: 173px; height: 56px; background-image: url(images/home-b.gif); display: block; }
.onas { width: 103px; height: 56px; background-image: url(images/onas-a.gif); display: block;}
.onas:hover { width: 103px; height: 56px; background-image: url(images/onas-b.gif); display: block; }
.galeria { width: 103px; height: 56px; background-image: url(images/galeria-a.gif); display: block;}
.galeria:hover { width: 103px; height: 56px; background-image: url(images/galeria-b.gif); display: block; }
.oferta { width: 105px; height: 56px; background-image: url(images/oferta-a.gif); display: block;}
.oferta:hover { width: 105px; height: 56px; background-image: url(images/oferta-b.gif); display: block; }
.regulamin { width: 104px; height: 56px; background-image: url(images/regulamin-a.gif); display: block;}
.regulamin:hover { width: 104px; height: 56px; background-image: url(images/regulamin-b.gif); display: block; }
.kontakt { width: 184px; height: 56px; background-image: url(images/kontakt-a.gif); display: block;}
.kontakt:hover { width: 184px; height: 56px; background-image: url(images/kontakt-b.gif); display: block; }
CSS Sprites