Menu orizzontale: Problema formattazione voci

[Viekke]

Buon giorno,

Sono nuovo del forum e anche del CSS, ho fatto qualche ricerca relativa al mio problema ma non riesco a trovare la soluzione. Devo fare un menu orizzontale per un sito, scritto in CSS + HTML. Il codice HTML con cui l'ho scritto è questo:

<div id="menu">
<ul>[*]Paperopoli e zio Paperone[*]Zio paperone e la moneta numero uno [*]paperopoli pluto pippo[*]pluto paperino[*]nonna papera paperone[*]Qui quo e qua[/list]

mentre quello CSS è:

#menu {
margin: 0px;
padding: 0px;
width: 750px;
background-color: #00BF18;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#menu li {
display: inline;
}
#menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #008000;
}

le voci del menu mi vengono tutte nella stessa riga e poi quando arriva in fondo le ultime 2 vanno a capo formando un altra riga. quello che vorrei è che le voci:

Paperopoli e zio Paperone
Zio paperone e la moneta numero uno

venissero formattate in questo modo:

Paperone e | Zio Paperone |
zio Paperone | e la moneta numero uno |

Come faccio?
Grazie ancora per l'aiuto

[H5N1_Aviaria]

con | intendi un ritorno a capo?
Prova a vedere se cambiando così ti va bene:

#menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #008000;
float : left;
display : block;
width : 8em;
font-size : 90%;
}

[Viekke]

Grandioso...GRAZIE!!

esattamente questo....

ora faccio le ultime modifiche