Algo rapido...
Código HTML:
<html>
<head>
<style>
.menu{
border: 1px solid black;
float: left;
width: 100px;
text-align: center;
display: block;
padding: 8px;
text-decoration: none;
color: black;
}
.submenu{
border: 1px solid black;
position: absolute;
width: 120px;
display: none;
}
</style>
<script>
function mostrar(num,menu){
var submenu = document.getElementById("submenu"+num);
submenu.style.top = menu.offsetTop + menu.offsetHeight;
submenu.style.left = menu.offsetLeft;
submenu.style.display = 'block';
}
function ocultar(num){
var submenu = document.getElementById("submenu"+num);
submenu.style.display = 'none';
}
</script>
</head>
<body>
<a href="#" id="menu1" class="menu" onClick="mostrar(1,this);">Menu 1</a>
<div id="submenu1" class="submenu" onMouseOut="ocultar(1);">
<a href="#">Submenu 1</a>
<a href="#">Submenu 2</a>
</div>
<a href="#" id="menu2" class="menu" onClick="mostrar(2,this);">Menu 2</a>
<div id="submenu2" class="submenu" onMouseOut="ocultar(2);">
<a href="#">Submenu 3</a>
<a href="#">Submenu 4</a>
</div>
</body>
</html>