menu su due livelli

[chef]

Salve...

utilizzando un breve script sulle guide HTML.it ho preso questo codice per un menu orizzontale con i css, ma non riesco a farne un altro sotto!!!
Cioè quello che mi servirebbe è un menu con 2 "righe" di menu una sotto l'altra e complessivamente della stessa lunghezza (quello che otterrei con una tabella di 5 colonne e 2 righe).
Qui sotto vi riporto l'esempio valido solo per una "riga" soltanto. Cosa devo fare per ottenerne un'altra sotto???????

<div id="menu">
<ul>[*]Home[*]Prodotti[*]Servizi[*]Portfolio[*]Contatti[/list]
</div>

e lo stile associato:

div#menu ul {
list-style:none;
margin:0 auto;
padding:0
}
div#menu ul li {
float: left;
width: 75px;
margin:0 0 0 3px;
padding:0;
border: 1px solid #2693FF
}
div#menu a {
display: block;
height: 25px;
line-height: 25px;
text-decoration:none;
text-align: center;
background-color: #FFFFC5;
color: #41418A
}
div#menu a:hover {
background-color: #FF7E00;
color: #fff
}

[chef]

Fose mi serve qualcosa di veramente piu' semplice...
In allegato vedete di cosa parlo, ed è fatto con una tabella (che non volevo usare)...
Ora, con lo script di cui vi parlavo all'inizio di questo thread riesco a fare il primo "rigo" come piace a me, ma non il secondo.
Ecco quello che vorrei ottenere (non fate caso ai colori e alla grezzesca del layout).
Le celle devono essere max 100 px.
:rollo:

[chef]

Ciao macsig puoi darmi il codice css associato all'html che mi hai dato prima in questo thread?

Grazie...

[chef]

HELP...
javascript:void(0);
Ciauz

[NuxiL]

Se lo vuoi come fosse una tabella basta impostare un'altezza al div (per esempio 30px) e mettere un altro div "menu" (sostituisci però id con class nell'html, e nel css sostituisci # con .)
Ti rimetto html e css:
HTML:

<div class="menu">
<ul>[*]Home[*]Prodotti[*]Servizi[*]Portfolio[*]Contatti[/list]
</div>
<div class="menu">
<ul>[*]Home[*]Prodotti[*]Servizi[*]Portfolio[*]Contatti[/list]
</div>

CSS:

.menu {
height: 30px;
}
div.menu ul {
list-style:none;
margin: 0px auto;
}
div.menu li {
float: left;
width: 75px;
margin: 0px 0px 0px 3px;
}
div.menu a {
display: block;
height: 25px;
line-height: 25px;
text-decoration:none;
text-align: center;
background-color: #FFFFC5;
color: #41418A;
border: 1px solid #2693FF;
}
div.menu a:hover {
background-color: #FF7E00;
color: #fff
}

Risultato:

[chef]

Ci siamo quasi!!!

Ho fatto questo:

<style type="text/css">
.menu {
height: 45px;
}
div.menu ul {
list-style:none;
margin: 0px auto;
}
div.menu li {
float: left;
width: 90px;
margin: 0px 0px 0px 0px;
}
div.menu a {
display: block;
height: 25px;
line-height: 15px;
text-decoration:none;
text-align: center;
background-color: #FFFFC5;
color: #41418A;
border: 1px solid #2693FF;
}
div.menu a:hover {
background-color: #FF7E00;
color: #ffffff
}
</style>

<div class="menu">
<ul>[*]Home[*]Chi siamo[*]Dove siamo[*]Centro cinofilo[/list]
</div>
<div class="menu">
<ul>[*]Eventi[*]Addestramento[*]Fitness[*]Allevamento[/list]
</div>
<div class="menu">
<ul>[*]Gli amici[*]Photogallery[*]Contatti[*]Area riservata[/list]
</div>

Però non riesco ad allargare il tutto fino a coprire quasi lo spazio della cella (ho a disposizione 402 pixel).
COME FACCIO?? Ho fatto qualche prova ma non sono riuscito...

[chef]

iper up!!!!

:rollo:

[NuxiL]

Aggiungi nel CSS a

div.menu ul

un:

padding: 0px;

Con questo risultato:

div.menu ul {
list-style:none;
margin: 0px auto;
padding: 0px;
}

E il gioco è fatto ;]

[chef]

Perfetto
grazie mille!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[chef]

tutto a posto.
Con i vs suggerimenti e l'ultima "pillola" di NuxiL sono riuscito a fare un menu come cercavo.

Very grazie to all!