Aquí te muestro un ejemplo básico de cómo puedes crear un menú con un "div" con id "abrir" que despliega un submenu con id "este" hacia abajo:
HTML:
```
<div id="abrir">Menú</div>
<div id="este">
<ul>
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
</ul>
</div>
```
CSS:
```
#este {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
padding: 10px;
}
#este ul {
list-style: none;
margin: 0;
padding: 0;
}
#este li {
margin: 0;
padding: 5px 0;
}
#este a {
color: #000;
text-decoration: none;
}
#abrir:hover #este {
display: block;
}
```
En este ejemplo, tenemos un "div" externo con id "abrir" que representa el botón del menú. El "div" interno con id "este" contiene una lista con las opciones del menú.
La propiedad CSS "display: none" oculta el "div" con id "este" por defecto. Utilizamos la propiedad "position: absolute" para posicionar el "div" de forma relativa al "div" con id "abrir". También le hemos dado un fondo blanco y una sombra para destacar visualmente el submenu.
El selector "abrir:hover #este" aplica la propiedad "display: block" al "div" con id "este" cuando se posiciona el puntero sobre el "div" con id "abrir". Con esto, el submenu será visible cuando el usuario pase el puntero sobre el botón del menú.
También puedes agregar efectos de transición, animaciones y otros estilos para personalizar el aspecto de tu menú.
