Duda en como armar Lista desplegable

[Raffa182]

Hola Gente!!!

Tengo el siguiente tema.
Tome un template free para editar y poder utilizar ahora me encuentro que necesito en uno de los botones de la lista agregar una lista desplegable con varias opciones.
El Código actualmente lo tengo así:

HTML:

<div id="templatemo_menu">
<ul>
<li><a href="index.html" class="current">Inicio</a></li>
<li><a href="news.html">Noticias</a></li>
<li><a href="howto.html">How To...</a></li>
<li><a href="gallery.html">Galería</a></li>
<li><a href="contact.html">Contactenos</a></li>
</ul>
</div>

Y el CSS
/* menu */

#templatemo_menu {
clear: both;
height: 39px;
padding: 11px 0 0 0;
}

#templatemo_menu ul {
margin: 0;
padding: 0 0 0 30px;
list-style: none;
}

#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}

#templatemo_menu ul li a {
position: relative;
float: left;
width: 103px;
display: block;
height: 23px;
padding: 4px 0 0 0;
margin-right: 10px;
text-align: center;
font-size: 12px;
text-decoration: none;
color: #21272d;
font-weight: bold;
outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #fff;
background: url(images/templatemo_menu_hover.png);
}

Como debería agregar la lista para que al pararme pueda ver Noticias -> Argentina -> Ecuador -> Colombia etc.

Saludos y gracias!!!

[Rafael]

No he revisado el código que pones, pero básicamente una lista desplegable debería ser algo con listas anidadas.

Código HTML:

<div id="templatemo_menu">
<ul>
<li><a href="index.html" class="current">Inicio</a></li>
<li><a href="news.html">Noticias</a></li>
 <ul>
 <li>Argentina</li>
 <li>Colombia</li>
 <li>Ecuador</li>
 </ul>
<li><a href="howto.html">How To...</a></li>
<li><a href="gallery.html">Galería</a></li>
<li><a href="contact.html">Contactenos</a></li>
</ul>
</div>
 

En cuanto al css depende del theme que escojas, pero este DEBE de estar preparado para desplegar el subnivel cuando hagas un hover. Este puede desplegarse con puro css o con JavaScript.
Busca alguno como estos: https://www.google.com.mx/search?q=c...menu+drop+down

Busca alguno que deba utilizar este anidado que te pongo, si empieza a usar divs por aquí y por allá no está bien preparado. Algún class, como <ul class="submenu"> puede ser, aunque yo prefiero que esté el código html limpio. (el primer link que aparece: http://cssdeck.com/labs/another-simp...-dropdown-menu está muy bien)

Otra cosa. Te conviene usar <nav id="templatemo_menu"> en lugar de <div id="templatemo_menu">

[Raffa182]

Muchas gracias @Rafael voy a probar y te comento si quedo resuelto o no!!!

[Rafael]

Hum. Al link que te puse habría que meterlo dentro de un contenedor.
Meter todo en un <nav id="Principal">

Y ane el css antes de cada ul inicial ponerle:
#Principal ul {bla bla}
#Principal ul li {bla bla}

[Raffa182]

@Rafael pude cargar los menú que me faltaban ahora se me esta complicando sobre el CSS, espero poder encontrarle la mano