Efectivamente, no hace falta Javascript para crear un menú desplegable, al menos no hace falta en principio, a no ser que necesites alguna funcionalidad o efecto especial más avanzada.
La parte complicada sería cómo posicionar el elemento desplegable, porque esta parte necesita un poco de posicionamiento CSS, aunque lo resuelves con los atributos position: relative
en el contenedor y position: absolute
en el desplegable.
Mira este código HTML:
<div class="ancla" id="lanzador">
<a href="#">Lanzador de menú</a>
<div id="desplegable" class="desplegable">
<a href="#">
Este es el submenú
</a>
<a href="#">
Otra opción
</a>
</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>
Fíjate que la parte desplegable está dentro del menú que lo abre, para poder posicionar bien un con respecto al otro.
Ahora mira este código CSS, que es el que consigue el efecto de mostrar y ocultar cuando pasas el ratón por el elemento que tiene el desplegable. Fíjate cómo se juega con el atributo position de CSS. Y cómo se hace uso de selectores CSS para conseguir seleccionar correctamente el hijo que se despliega.
.ancla {
display: inline-block;
background-color: #ffc;
padding: 0.5rem 1rem;
color: #00a;
font-weight: bold;
position: relative;
line-height: 1rem;
}
.desplegable {
background-color: #eee;
padding: 0.5rem 1rem;
display: none;
position: absolute;
top: 2rem;
left: 0;
z-index: 1;
width: 150px;
}
.desplegable a {
display: block;
margin-bottom: 0.5rem;
}
.ancla:hover > a {
color: red;
}
.ancla:hover .desplegable {
display: block;
}
Cualquier duda más concreta puedes crear otra FAQ o comentar esta misma. Suerte!