quizas te sirva este.. no te entendi mucho si querias que aparecieran abajo, o al lado?.. que se muestren los submenus o que se oculten? de todas formas prueba este script (no funciona para IE a menos que uses un "hack" para los menus ocultos.)
Código:
<style type="text/css">
/*Eliminar las sangrias*/
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
/*Posicion relativa para los menus*/
ul li {
position: relative;
}
/*Posicion absoluta para los submenus y posicionar a la derecha del menu*/
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
/*Estilo a los enlaces*/
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/*Estilo al cerrar menu*/
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block;}
a:hover{ background-color:#666666; color:#FFFFFF;}
</style>
<ul>
<li><a href="#">MENU 1</a>
<ul>
<li><a href="#">LINK 1</a></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
<li><a href="#">LINK 4</a></li>
</ul>
</li>
<li><a href="#">MENU 2</a>
<ul>
<li><a href="#">LINK 1</a></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
</ul>
</li>
<li><a href="#">MENU 3</a>
<ul>
<li><a href="#">LINK 1</a></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
</ul>
</li>
</ul>
Espero que te sirva.