Ho creato un menu tramite liste e l'ho animato tramite MooTools.

Il risultato potete vederlo qui:

MainMenu

Vorrei migliorarlo in alcuni punti.

Innanzi tutto vi posto l'html:

codice:
<div id="mainmenu">
 	<ul>
		<li id="iconHome">
			<a href="mainMenu.html" title="test">
				
				Home
			</a>
			
		
	[/list]
</div>
Div contenitore #mainmenu
Ul
Li (background per clip)
A (background specifico)
Non breaking space (per FF)
Em che racchiude il testo (per nasconderlo)
I (background di chiusura)

Tutto questo non è molto simpatico!
Devo scrivere necessariamente tutto questo codice per farlo funzionare?

Più avanti trovata il listato del css, ora vi posto la versione html completa:

codice:
<div id="mainmenu">
 	<div id="topLayers">
		<div id="login">
			

Registrati o Effettua il  <span class="logOutLink">[ Login ]</span></p>
		</div>
		<div id="search">
			

Effettua una <span class="logOutLink">[ Ricerca ]</span></p>
		</div>
	</div>
	<ul>
		<li id="iconHome">Home
		<li id="iconLogin">Login
		<li id="iconSearchUser">Utenti
		<li id="iconSearchPhoto">Foto
		<li id="iconSearchVideo">Video
		<li id="iconSearchMusic">Musica
		<li id="iconSearchClan">Clan
		<li id="iconSearchTag">Etichette
		<li id="iconSearchDefault">Ricerca
		<li id="iconHelp">Help
	[/list]
</div>
il css è il seguente:

codice:
#mainmenu ul { 
	height: 30px;
	width: 780px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
}
 
#mainmenu ul li {
	float: left;
	display: block;
	width: 78px;
	height: 30px;
	// questo è lo sfondo generale dei pulsanti serve per coprire un piccolo bug
	background: transparent url("../images/mainMenu_buttonBg.png") top right no-repeat;
	line-height: 30px;
}
// questo è lo sfondo di destra
#mainmenu ul li i {float: right; width: 10%; background: transparent url("../images/mainMenu_buttonEnd.png") top right no-repeat;}
// questo è lo sfondo di sinistra, le immagini vengono definite successivamente
#mainmenu ul li a {float: left;  width: 90%; text-decoration: none}
// questo serve per far scomparire il testo
#mainmenu ul li a em { display: none;}

// qui ci sono le definizioni delle immagini di sfondo dei pulsanti
#iconHome a					{background: transparent url("../images/mainMenu_buttonHome.png")}
#iconLogin a				{background: transparent url("../images/mainMenu_buttonLogin.png")}
#iconSearchUser a			{background: transparent url("../images/mainMenu_buttonUsers.png")}
#iconSearchPhoto a		{background: transparent url("../images/mainMenu_buttonPhoto.png")}
#iconSearchVideo a		{background: transparent url("../images/mainMenu_buttonVideo.png")}
#iconSearchMusic a		{background: transparent url("../images/mainMenu_buttonMusic.png")}
#iconSearchClan a			{background: transparent url("../images/mainMenu_buttonClan.png")}
#iconSearchTag a			{background: transparent url("../images/mainMenu_buttonTags.png")}
#iconSearchDefault a		{background: transparent url("../images/mainMenu_buttonSearch.png")}
#iconHelp a					{background: transparent url("../images/mainMenu_buttonHelp.png")}
Visto che il[*] si ingrandisce al passaggio del mouse, svelando il resto dell'immagine, per rendere questo effetto ho impostato le percentuali: 90% ai link e 10% ai tag [i].
In questo modo però quando si ingrandisce il pulsante tra il link e il tag [i] si forma uno spazio vuoto di uno o due px.
Per ovviare a questo ho impostato uno sfondo particolare per i[*].

Suggerimenti?