salve in un web site devo crear un menu a tendina ma mi da un problema vi posto il tutto:

CSS:
codice:
div.menu { line-height:60px; }
div.menu>ul>li { position:relative; float:left; width:134px; text-align:center; }

ul#submenu { position:absolute; display:none; }
ul#submenu>li { line-height:24px; margin-bottom:3px; background-color:#85c442; padding:0px 5px; text-align:left; min-width:134px; }

a.menu { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#FFF; text-transform:uppercase; text-decoration:none; }
a.menu:hover { color:#00D28E; }

a.submenu { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#507b5d; text-transform:uppercase; text-decoration:none; }
a.submenu:hover { color:#d9ef80; }
HTML:
codice:
<div class="menu">
<ul>[*]<span class="menu">HOME</span>[*]CHI SIAMO[*]<a id="menu_product" class="menu" href="javascript:void()">PRODOTTI
<ul id="submenu">[*]TRADIZIONALI[*]SPECIALI[*]UOVA SFUSE[/list]
</a>[*]NEWS[*]RICETTE[*]DISTIBUZIONE[*]CONTATTI[/list]
<div id="clear"></div>
</div>
come vedete un semplice menu ora guardando l'immagine:


il menu compare sotto la barre verde orizzontale invece mi dovrebbe comparire sotto il link "PRODOTTI".