La idea basica para hacer menus desplegables(drodowns) consiste en crear el menu en un contenedor de html y establecer su propiedad de display:none para que se mantenga oculto hasta que ocurra cierto evento. Esto se puede hacer con JavaScript, pero aqui te enseño a hacerlo solo con css.
Vamos a modificar la nav bar que hicimos cambiando las etiquetas <a> por <span>, ya que no seran enlaces o si gustas puedes mantener uno o varios como enlace y te aseguras de agregar , .navbar > ul>li > span (con la coma) en donde defines el estilo para .navbar > ul>li >a o defines un estilo diferente para ambos. En html cada li quedara como este codigo.
En css primero establecemos display:none para la clase .dropdown-content y definimos cual sera min-width para mantener consistencia en el ancho de los menus. En .dropdown-content>a{} establecemos display:block para poder personalizar los enlaces y hacer que se comporten como botones y agregamos text-decoration:none para eliminar el estilo predeterminado de enlaces.
En este ejemplo le agregamos mas dinamismo al menu desplegable al agregar .dropdown-content>a:hover{} y con esto podemos definir alguna reaccion de los menus al pasar el cursor sobre ellos. En este caso le cambiamos el color de fondo a <a>.
En la ultima parte de este codigo es donde se establece que el menu desplegable sera visible cuando se realize un hover sobre los <li>. Recuerda dejar solo un espacio entre la primera parte y .dropdown-content sin colocar comas.
Y eso es todo ! ( ^__^)/ ojala que te haya gustado el tema y que sigas practicando. Tambien explora con mas posibilidades y consulta las referencias de W3C, MDN docs y W3Schools.
Boston, Massachusetts
sinoplecarballo@gmail.com
Martin Carballo
@shur_d_firsiel