Css meny - rollover.

Jag vill göra en meny lik den som finns på denna sida(den är dock gjord med javascript och jag vill använda css):
http://www.enzo.nu/

Länkarna/knapparna ska bestå av bilder som när man för över musknappen ska ändras=visa en annan bild. Hur gör jag enklast detta? Iom att jag har flera olika knappar/menyval som alla har olika bilder som ska visas när man för över musknappen så blir det lite problem....eller?

Är det nån som kan hjälpa mig? Detta är min första hemsida som jag använder css till....

Klockrent! Fungerar jättebra. Men om jag nu vill ha fler knappar/länkar....hur kommer koden se ut då?

Jag är inte helt erfaren som du märker...=)

Åh vad bra! Trodde inte det skulle fungera då jag frågade på ett annat forum och där fick jag till svar att det inte gick....Tack så mycket för hjälpen!!

Nu har jag stött på problem....när jag testade förrut så hade jag bara en knapp och det fungerade bra. Nu har jag dock lagt in fler (6 st som jag vill ha i två rader, 3 och 3) och nu syns dom helt plötsligt inte. Länkarna/bilderna ska ligga ovanpå en större bild/bakgrundsbild ungefär likadant som på den sidan jag länkade till i första inlägget.

Jag har gjort såhär, skratta inte nu åt mitt knapphändiga försök!

Css koden ser ut såhär:

.topcontainer { width: 760px; height: 250px; background-image: "top.jpg"; background-repeat:no-repeat;

a.navup {
margin-top:-177px;
display: block;
padding-right: 5px;
height: 47px;
width: 72px;
float:left;
}
a.navup span {
display: none;
}

a.navdown {
margin-top:-135px;
display: block;
padding-right: 5px;
height: 47px;
width: 72px;
float:left;

}
a.navdown span {
display: none;
}

a#one {
background-image: url('oneknapp.jpg'); background-repeat:no-repeat;
}

a:hover#one {
background-image: url('oneknapp_hover.jpg'); background-repeat:no-repeat;
}

a#two {
background-image: url('twoknapp.jpg'); background-repeat:no-repeat;
}

a:hover#two {
background-image: url('twoknapp_hover.jpg'); background-repeat:no-repeat;
}

a#three {
background-image: url('threeknapp.jpg'); background-repeat:no-repeat;
}

a:hover#three {
background-image: url('threeknapp_hover.jpg'); background-repeat:no-repeat;
}

a#four {
background-image: url('fourknapp.jpg'); background-repeat:no-repeat;
}

a:hover#four {
background-image: url('fourknapp_hover.jpg'); background-repeat:no-repeat;
}

a#five {
background-image: url('fiveknapp.jpg'); background-repeat:no-repeat;
}

a:hover#five {
background-image: url('fiveknapp_hover.jpg'); background-repeat:no-repeat;
}

a#six {
background-image: url('sixknapp.jpg'); background-repeat:no-repeat;
}

a:hover#six {
background-image: url('sixknapp_hover.jpg'); background-repeat:no-repeat;
}

Och html-koden ser ut så här:

<div class="topcontainer"></div>

<a href="#" id="one" class="navup" title=""><span></span></a>
<a href="#" id="two" class="navup" title=""><span></span></a>
<a href="#" id="three" class="navup" title=""><span></span></a>
<br />
<a href="#" id="four" class="navdown" title=""><span></span></a>
<a href="#" id="five" class="navdown" title=""><span></span></a>
<a href="#" id="six" class="navdown" title=""><span></span></a>

Kan upprepa att jag vet inte riktigt vad jag sysslar med.....;)

Nu får jag ingenting att fungera längre. =(

När jag kollar i en browser så syns ingenting. Har tagit bort allting inom body-taggen utom själva länkarna ovan men dom syns inte alls.....vad kan det vara för fel då? Rör jag med musknappen över så ändras pekaren så dom ligger ju där men är osynliga.....mysko.

Ingen som kan hjälpa mig?

Ska försöka förklara hur jag vill att det ska se ut:
På sidan ska det ligga en bild, top.jpg som är 760x258 px, den ska ligga med en marginal på ca 75 px från vänster sidan. På denna bild så ska länkar ligga i form av knappar/bilder som har en hover-effekt där en annan bild visas. Nån som kan barmhärtiga sig....?