Menu javascript en html

Hola me gustaria saber como insertar un menu desplegable javascript aqui:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Menul </TITLE>
<style type="text/css">
div.contenedor
{
font-family:Century Gothic;
font-size:12px;
position:absolute;
background-color:#CCFFFF;
width:80%;
}
div.cabecera
{
background-color:#00FF99;
color:WHITE;
HEIGHT:60px;
}
h1
{
text-align:center;
margin-top:20px;
}
div.menu
{
float:left;
background-color:#00FFCC;
height:200px;
width:150px;
}
div.cuerpo
{
height:200px;
}
div.pie
{
background-color:#00FF99;
color:WHITE;
HEIGHT:60px;
text-align:center;
font-size:14px;
padding:10px:
}
ul
{
list-style-type:none;
margin:10px;
}
a
{
text-decoration:none;
color:#000000;
background-color:#33FF99;
}
a:hover
{
color:#FF0000;
background-color:#FFFFCC;
}
</style>
</HEAD>

<BODY>
<div class="contenedor">
	<div class="cabecera">
		<h1>Titulo de la pagina </h1>
	</div>
	<div class="menu">
		<ul>

			<li><a href="#">Opcion 1</a></li>
			<li><a href="#">Opcion 2</a></li>
			<li><a href="#">Opcion 3</a></li>
		</ul>
	</div>
	<div class="cuerpo">
		cuerpo de la pagina
	</div>
	<div class="pie">
		Pie de la pagina
	</div>
</div>
</BODY>
</HTML>
Gracias.