top menu più accattivante

[The-BiT]

Salve,
ho un problema - se così si può chiamare - col top menu del mio sito. Indipendentemente dal template che utilizzo, vi posto il css e il risultato del top menu:

/* TOP MENU STYLES */
ul#mainlevel-nav {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}

ul#mainlevel-nav li {
float: left;
margin: 1px;
border: 1px solid #ccc;
padding: 0px;
width: 100px !important;
width: 98px;
white-space: nowrap;
}

ul#mainlevel-nav li a {
width: auto !important;
width: 100%;
display: block;
margin: 0;
padding: 1px;
color: #fff;
font: bold 11px/12px Arial, Helvetica, sans-serif;
text-indent: 4px;
text-decoration: none;
background: #9ab;
-moz-opacity:0.90;
opacity:0.90;
filter:alpha(opacity='90');
}

#buttons>ul#mainlevel-nav li a {
width: auto;
float: left;
}

ul#mainlevel-nav li a:hover {
color: #fff;
background: #bcd;
}
/* --------- */

e il risultato lo vedete in immagine allegata.
Io vorrei dare un tocco più professionale, quasi 3D al top menu, e non saprei come intervenire da questo css. Cioè, questo codice crea una banale forma rettangolare al menu.
Secondo voi, cosa potrei modificare per dare un tocco più professionale, o comunque adattarlo alle mie esigenze?
In alternativa, conoscete qualche buon componente per i top menu?

Grazie mille.

[allegato eliminato da un amministratore]

[tonicopi]

Non può essere un top menù che rende professionale un sito.
Ma a una richiesta come la tua non si può rispondere.
Fai prima a cercare un template già attrezzato di un top menù che ti aggrada e al quale cambiare solo qualcosa.
Che ne dici di questo:
www.fcivicenza.com

[The-BiT]

Grazie ugualmente,
nel frattempo ho improvvisato una barra di sfondo ed ho ottenuto, per sommi capi, quello che cercavo.