Ciao a tutti,
sto letteralmente impazzendo con un effetto hover creato da css su dei link.

Io vorrei prendere 3 immagini, affiancarle (quindi metterle tutte orizzontalmente) e dare loro un tag a per i link; però vorrei anche che al passaggio del mouse le immagini cambino, il tutto usando solo i css.

Attualmente ho realizzato una cosa del genere:

Css:
codice:
.cont {
	display:inline;
}

.home {
	background:url(immagine1.gif) no-repeat;
	min-width:80px;
	min-height:15px;
}

.home:hover {
	background:url(immagine1hover.gif) no-repeat;
	min-width:80px;
	min-height:15px;
}

.forum {
	background:url(immagine2.gif) no-repeat;
	min-width:80px;
	min-height:15px;
}

.forum:hover {
	background:url(immagine2hover.gif) no-repeat;
	min-width:80px;
	min-height:15px;
}
Html:
codice:
<html>
<head>
	<title>Prova</title>
<link rel="stylesheet" type="text/css" media="screen" title="Stile predefinito" href="css.css" />


</head>

<body>
<ul class="cont"> <li class="home"> <li class="forum">[/list]


</body>

</html>

Qual è il problema? Il problema è che le immagini mi vengono un sopra l'altra, mentre io le vorrei affiancate

Ho provato anche a dare l'attributo inline a li, ho provato invece di usare ul e li ad usare span, ma niente...

Qualcuno potrebbe gentilmente illuminarmi o darmi qualche altra idea per favore?

Grazie in anticipo