Bueno, tiene un fallo, y es que como luego verás, entre <table> y <table> deja automaticamente un espacio, por lo que no deja navegar por el menu.
De todas formas, te dejo el código.
Código HTML:
<style type="text/css">
#tmenu{
background-color:#000000;
color:#FFFFFF;
padding:3px;
font-family:georgia;
font-size:12px;
}
#tmenu,td{
width:150px;
text-align:center;
}
#tmenu,a{
color:#FFFFFF;
text-decoration:none;
}
#tmenu,a:hover{
color:#FFF000;
}
#tmenu,hr{
color:darkred;
}
#menu{
background-color:#000000;
color:#FFFFFF;
padding:3px;
font-family:georgia;
font-size:12px;
}
#menu,td{
width:150px;
text-align:center;
}
#menu,a{
color:#FFFFFF;
text-decoration:none;
}
#menu,a:hover{
color:#FFF000;
}
#menu,hr{
color:darkred;
}
</style>
<script language="JavaScript" type="text/javascript">
function MuestraOcultaMenu(elemento,estado){
document.getElementById(elemento).style.display=estado;
}
</script>
<table id="menu">
<tr><td onClick="MuestraOcultaMenu('tmenu','block')">~ MENU ~</td></tr>
<table id="tmenu" style="display:none" onMouseOut="MuestraOcultaMenu('tmenu','none')">
<tr><td><a href="#">Primer URL</a></td></tr>
<tr><td><hr /></td></tr>
<tr><td><a href="#">Segundo URL</a></td></tr>
</table>
</table>
<br />
demas texto de la web