Les comento que yo tambien me interesé por el menu...pero se me hizo un poco complicado moverlo a mi gusto...justo lo que dicen ustedes.
en scriptmaster consegui este codigo se los paso. Lo prueban y me dicen que tal. A mi meparecio bien.... solo que no estoy seguro si funcioe con todas las resoluciones de pantalla tal vez hay que hacer diferentes menu para cada resolucion.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script>
var left_corner_x =220; // x-coordinate of top left corner of dropdown menu
var left_corner_y = 37; // y-coordinate of top left corner of dropdown menu
var back_color = '#E6E6E6'; // the background color of dropdown menu
var border_color = 'black'; // the color of dropdown menu border
var border_size = '1'; // the width of dropdown menu border
var menu_width = '121'; // the width of dropdown menu
//// Don't change these parameters
var delay = 500; /////
var active_layer_id = -1; /////
var on_layer_id = -1; /////
var buff_id = -1; /////
/// ----------------------------
//Script developed by Alexey
//for support visit http://www.geocities.com/menulite
//submitted to A1 JavaScripts - www.a1javascripts.com
// menu content; the dropdown menus themselfs between '' and items of every dropdown menu are diveded by |;
//
menu_content = new Array ('<a href=http://www.forosdelweb.com/ class=subMenu>link 1</a> | <a href=http://www.forosdelweb.com/ class=subMenu>Link 2</a>',
'<a href=http://www.forosdelweb.com class=subMenu>link</a> | <a href=http://www.forosdelweb.com class=subMenu>link</a> | <a href=http://www.forosdelweb.com class=subMenu>link</a>',
'<a href=http://www.forosdelweb.com/ class=subMenu>link</a> | <a href=http://www.forosdelweb.com/ class=subMenu>link</a>',
'<a href=http://www.forosdelweb.com/ class=subMenu>link x</a> | <a href=http://www.forosdelweb.com/ class=subMenu>link y</a>');
</script>
<style>
a.topMenu
{
color: black;
font-family: Verdana, Arial, Helvetica;
font-size: 9pt; text-decoration: none;
font-weight: bold;
}
a.topMenu:hover
{
color: red;
}
a.subMenu
{
color: black;
font-family: Verdana, Arial, Helvetica;
font-size: 9pt;
text-decoration: none;
}
a.subMenu:hover
{
color: red;
}
a.Mail
{
color: #FF6633;
font-family: Verdana, Arial, Helvetica; font-size: 8pt;
}
a.Mail:hover
{
text-decoration:none;
}
</style>
<title>menu</title>
<script>
//Script developed by Alexey
//for support visit http://www.geocities.com/menulite
//submitted to A1 JavaScripts - www.a1javascripts.com
// check browser version
NS4 = (document.layers) ? 1 : 0;
function layer_enter (id)
{
on_layer_id = id;
}
function layer_exit (id)
{
on_layer_id = - 1;
setTimeout ('hide('+ id +')', delay/5);
}
function menu_enter (id)
{
if (buff_id >= 0)
hide (buff_id);
show (id);
active_layer_id = id;
}
function menu_exit (id)
{
setTimeout ('hide('+ id +')', delay);
buff_id = active_layer_id;
active_layer_id = -1;
}
function show (id)
{
if (!NS4)
document.all['Menu' + id].style.visibility = "visible";
else
document.layers[id].visibility = "visible";
}
function hide (id)
{
if (active_layer_id != id && on_layer_id != id)
{
if (!NS4)
document.all['Menu' + id].style.visibility = "hidden";
else
document.layers[id].visibility = "hide";
}
}
function generate_layers ()
{
for (i = 0; i < menu_content.length; i++)
{
if (!NS4)
layer_header = '<div id=Menu' + i +
' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +
' style="visibility: hidden; position: absolute; left: ' + (left_corner_x + menu_width*i) +
'; top: ' + left_corner_y + ';">';
else
layer_header = '<layer id=' + i +
' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +
' visibility=hide left=' + (left_corner_x + menu_width*i) +
' top = ' + left_corner_y + '>';
layer_header += '<table width=' + menu_width + ' cellpadding=0 cellspacing=0 border=0>' +
'<td bgcolor=' + border_color + '><table width=' + menu_width + ' cellpadding=3 ' +
'cellspacing=' + border_size + ' border=0><td width=' + menu_width + ' bgcolor=' + back_color + '>';
elements = menu_content[i].split (/\s*\|\s*/);
layer_body = '';
for (j = 0; j < elements.length; j++)
{
layer_body += elements[j];
if ((NS4 && j < elements.length - 1) || (!NS4 && j < elements.length - 1))
layer_body += '<hr width=' + (menu_width - 8) + ' size=1 color='+ border_color + '>';
}
layer_footer = '</td></table></td></table>';
if (!NS4)
layer_footer += '</div>';
else
layer_footer += '</layer>';
document.writeln (layer_header + layer_body + layer_footer);
}
}
generate_layers ();
</script>
<base target="principal">
</head>
<body bgcolor="#006FA4">
<div align="center">
<center>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="456" >
<tr>
<td ALIGN=CENTER VALIGN=CENTER HEIGHT="20" BGCOLOR="#000000" width="485">
<table BORDER=0 CELLPADDING=0 WIDTH="485" >
<tr>
<td ALIGN=CENTER VALIGN=CENTER WIDTH="120" HEIGHT="20" BGCOLOR="#FFCC00"><a href="/menulite/" onMouseOver="menu_enter (0);" onMouseOut="menu_exit (0);" class="topMenu">Inicio</a></td>
<td ALIGN=CENTER VALIGN=CENTER WIDTH="120" BGCOLOR="#FFCC00"><a href="/menulite/" onMouseOver="menu_enter (1);" onMouseOut="menu_exit (1);" class="topMenu">Diagrama</a></td>
<td ALIGN=CENTER VALIGN=CENTER WIDTH="120" BGCOLOR="#FFCC00"><a href="/menulite/" onMouseOver="menu_enter (2);" onMouseOut="menu_exit (2);" class="topMenu">Catálogo</a></td>
<td ALIGN=CENTER VALIGN=CENTER WIDTH="120" BGCOLOR="#FFCC00"><a href="/menulite/" onMouseOver="menu_enter (3);" onMouseOut="menu_exit (3);" class="topMenu">Formato</a></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
suerte