Hola chic@s, como están?
Tengo un pequeño problema, tengo un menu para una página hecho con xhtml y css y en uno de los links quisiera colocarle un menu desplegable con 3 links más y que se corra a la derecha del menú que tengo que es vertical a la izquierda, el que quisiera que fuera desplegable es el que dice "Especialistas" para que aparezcan los nombres de los 3 miembros del Staff y así, al darle click a cualquiera, nos lleve a su respectiva hoja de vida (ya eso último lo tengo más claro), les coloco el código acá a ver si le echan una miradita.
Muchas gracias a tod@s por su ayuda

.
Código HTML:
<div id="container_navigation">
<div id="navigation">
<ul>
<li><a href="#" class="active">Quienes Somos </a></li>
<li><a href="mision-vision.html">Misión - Visión </a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="especialistas.html">Especialistas</a></li>
<li><a href="cursos.html">Cursos</a></li>
<li><a href="consultorias.html">Consultorías</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><a href="#">English Version</a></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS
Código HTML:
#container_navigation {
padding: 20px 0px 0px 0px;
width: 180px;
display: block;
float: left;
}
#navigation {
height: 310px;
min-height: 310px;
}
#navigation ul {
color: #FFFFFF;
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style: none;
}
#navigation li a {
text-decoration: none;
color: #FFFFFF;
display: block;
padding: 7px 0 5px 20px;
margin: 0 20px 0 0;
height: 18px;
}
#navigation li a:hover {
font-weight: bold;
}
#navigation li a.active {
text-decoration: none;
color: #00709f;
background-color: #bfeaff;
padding: 7px 0 5px 20px;
margin: 0 20px 0 0;
font-weight: bold;
}