Hay un montón de ejemplos en google, en tu html tienes que agregar otra lista, algo así:
Código HTML:
<nav id="navigation">
<a href="#" class="nav-btn">Home<span></span></a>
<ul>
<li><a href="quienes somos.html">Quienes somos</a></li>
<li><a href="#">Que hacemos</a></li>
<li class="active home"><a href="social.html">Social</a>
<ul class="children">
<li><a href="#"> Investigación Social</a></li>
<li><a href="#"> Comunicación Publica</a></li>
</ul></li>
<li><a href="http://vab-consulting.blogspot.com.es/" target="_blank">Blog</a></li>
<li><a href="contacto.html">Contacto</a></li> </ul>
En el css, lo maquetas como mas te guste, le puedes añadir transiciones o lo que desees. Una vez lo tengas maquetado, le pones la opacidad en 0 o el display:none, y lo harás visible con el :hover, es decir
Código:
.activehome:hover > children{
opacity:1;
}
Espero haberme sabido explicar y que te haya sido de ayuda. Saludos