[CSS] Menù a tendina "dropup" su mouse hover

[MoroX94]

Ciao a tutti.

Vi chiedo un aiuto per un sito a cui sto lavorando. È una cosa abbastanza semplice, ma non riesco a procedere: devo impostare il menù di navigazione che al mouse hover (:hover) su un tasto del menù <li> si apra una tendina con i sottomenù al di sopra del <li> del menù principale a cui sono collegati.

Il codice HTML è il seguente:

<div id="template_menu">
<ul>
<li><a href="chi_siamo.html">Chi siamo</a></li>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Noi</a></li>
</ul>
<li><a href="dove_siamo.html">Dove siamo</a></li>
<li><a href="press.html">Press</a></li>
<li><a href="contattaci.php">Contattaci</a></li>
<li><a href="prodotti.html">Prodotti</a></li>
</ul>
</div>


Mentre il CSS è il seguente:

#template_menu {
clear: right;
height: 45px;
float: right;
margin-top: 120px;
width: 730px;
margin-right: 63px;
}
#template_menu ul {
margin: 0;
list-style: none;
}
#template_menu ul li {
padding: 0;
margin: 0;
}
#template_menu ul li a {
float: left;
font-size: 13px;
width: 100px;
height: 25px;
color: #E6E9C0;
text-decoration: none;
font-weight: bold;
text-align: center;
outline: none;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
display: block;
background-image: url(images/menu.png);
margin: 5px;
background-repeat: repeat-x;
}
#template_menu ul li a:hover, #template_menu ul .current {
color: #fff;
background-repeat: repeat-x;
background-position: left center;
background-image: url(images/menu_hover.png);
}
#template_menu ul li ul {
display: none;
position: relative;
top: -35px;
left: -110px;
}
#template_menu ul li:hover ul {
display: block;
}


Come vedete, è tutto molto semplice, ma i pulsanti Mission e Noi, compaiono a fianco di Chi siamo, invece che incolonnati sopra. E soprattutto, compaiono al caricarsi della pagina, ignorando l'attributo "display: none" e la condizione dell'hover.

Dove sbaglio?
Grazie in anticipo per l'interessamento.

Saluti!

[OoZic]

<li><a href="chi_siamo.html">Chi siamo</a>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Noi</a></li>
</ul>
</li>

hai chiuso </li> prima di aprire il sottomenù (<ul>)

[MoroX94]

Vero, ora controllo...

Edit: hai ragione, errore banale! Ora funziona tutto, però si verifica un altro problema.
Usando il valore "relative" per l'attributo "position", la tendina compare al di sopra di "Chi siamo", ma lascia un buco nella barra del menù. Se uso il valore "absolute" la sua posizione varia al variare della risoluzione.

Come posso fare?

Edit2: Risolto, occorreva impostare il valore "relative" all'attributo "position" relativo ai singoli <li> del menù principale.

Grazie ancora!