menu su due livelli

[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...