un menù un pò impiccioso

[Ikona]

Salve a tutti, devo realizzare un menù che mi sta portando via un pò di tempo




Avete qualche idea sul come realizzarlo?

io ho tirato fuori qualcosa del genere:

#menu span a{

margin-top:18px;
color:#000000;
decoration:none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
text-align:center;
}

#menu span a:hover{

margin-top:18px;

background-image: url(images/palloncino.gif);
	background-repeat: no-repeat;
	
color:#FFFFFF;
decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align:center;
}

questa la parte di codice

<div id="menu">
<span>menu1</span>|
<span> menu2 |
<span> menu3 </span>|
</div>

ma... a parte il fatto che su ie non funziona proprio bene, come faccio a centrare il palloncino sulla scritta? tenendo conto che io non ho il controllo sulle lunghezze dei testi che vengono pescati da un DB (si tratta di un CMS)

fatevi venire qualche idea...

[Mich_]

Prova ad usare dei[*] inclusi in un <ul> al posto degli span.

Dato che di default i[*] vanno a capo, dovrai definire
float: left;
nel CSS relativo.

Poi per centrare la cosa non e` difficile: il palloncino sara` uno sfondo, che posizioni centrato:
background: url(images/palloncino.gif) no-repeat top center;