Menu dropdown che fa abbassare il contenuto della pagina

[Fix87]

Ho provato a dare uno sfondo ad ogni contenitore e ad aumentare anche l'altezza dell'height ma non vedo problemi, nel senso che se do un background al li del sub menu ovviamente mi crea un background solanto ai singoli "li del submenu", se invece do un background allo "ul del submenu" mi crea un rettangolo che comprende tutti i "li" del submenu, quindi lavora bene direi il codice. Posto il codice con l'ultima modifica fatta che comprende soltanto il position:absolute del sottomenu e nessun position:relative per il menu di sopra!

HTML

<div id="menu">
     <ul id="nav">[*]Home Page
               <ul>[*]Benvenuti[*]Storia[*]Servizi[/list]
          [*]Tour virtuale[*]Prenotazioni[*]Guestbook[*]Contatti[/list]
     <div style="clear:both;"></div>
</div>

CSS

#menu{
     margin:0 auto;
     width:700px;
}
#nav li{
     float:left;
     margin-left:30px;
}
#nav li a{
     display:block;
     width:100px;
     text-align:center;
     background-color:black;
     border-radius:1em;
     box-shadow:0 3px 5px #666666;
     text-decoration:none;
     color:#F3EA3A;
}
#nav li a.paginaCorrente{
     background-color:#F3EA3A;
     color:black;
}
#nav li a:hover{
     background-color:#F3EA3A;
     color:black;
}
#nav li ul{
     display:none;
     position:absolute ;
}
#nav li:hover ul{
     display:block;
}
#nav li ul li{
     float:none;
     margin:5px 0 0 0;
}

Come potete notare ho evidenziato in rosso il position absolute ed è l'unica regola di position che ho inserito, non ho neanche bisogno del relative per i li del menu generale. Davvero non ci capisco niente con questi position!

Vi posto inoltre un'immagine con e senza l'absolute per farvi vedere di quello che succede!