Ayuda con este menú

[Marymila]

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&oacute;n - Visi&oacute;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;
}