[CSS][HTML] Menu Opcje

[mrk9109]

Witam mam takie pytanie mam takie menu jak w kodzie poniżej 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>

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; }

Ten post edytował mrk9109 12.12.2010, 21:37:44

[Damonsson]

Magiczne 2 słowa to: CSS Sprites