Problema con menú desplegable

[rostein]

Buenas tardes,

Llevo tiempo pegándome con un menú desplegable y no consigo que, pese a ser algo tan sencillo, me salga bien.

Os adjunto, el html y el css:

Código:

<nav id="menuprincipal">
<ul>
<li><a href="ccaa.php">Comunidades Aut&oacute;nomas</a>
	<ul>
    	<li><a href="">Uno</a></li>
        <li><a href="">Dos</a></li>
        <li><a href="">Tres</a></li>
    </ul>
</li>
<li><a href="familias.php">Familias</a></li>
<li><a href="noticias.php">Noticias</a></li>
<li><a href="boletin.php">Boletín</a></li>
<li><a href="foro.php">Foro</a></li>
<li><a href="contacto.php">Contacto</a></li><div class="vacio"></div>
</ul>
</nav>

Código:

#menuprincipal{
margin-top:10px;
background-color:#000;
height:30px;
}

#menuprincipal ul li {
display:inline;
position:relative;
text-decoration:none;
font-size:1.6em;
font-family:Verdana, Geneva, sans-serif;
margin-top:5px;
margin-right:15px;
float:left;
}
#menuprincipal ul li a{text-decoration:none;
color:#fff;}

#menuprincipal ul li ul{
display: none;
position: absolute;
top: 24;
left:0;
margin:0;
padding:0;
}
#menuprincipal ul li ul li {
display: none
}
 
#menuprincipal ul li ul li:hover {
display: block;
}

Gracias por la atención.