Cita:
Iniciado por all-ill 
Del mismo modo que en esos ejemplos puedes usar
z-index en el menú.
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ingreso al sistema</title>
<link rel="STYLESHEET" type="text/css" href="Css/estilos.css">
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="Calendario/jsDatePick_ltr.min.css" />
<script type="text/javascript" src="Calendario/jsDatePick.min.1.3.js"></script>
<style type="text/css">
//* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#fondo {position:fixed; top:0; left:0;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
<?php
/*include_once "BasedeDatos/ConsultasDAO.php";
//buscar usuario y login en la base de datos
$dao=new ConsultasDAO();
if($_POST['usuario']!=null){
$dao->buscar_con($_POST['usuario'],$_POST['login']);
}*/
?>
</head>
<body>
<center>
<div id="fondo">
<img src="images/fondop.jpg" style="width:100%; height:100%; position:fixed; z-index:-1;" />
<div align="center" id="bg">
<img src="images/fondo5.png" width="1419" height="180"></div></center>
<div id="bg">
<img src="images/logo.png" width="194" height="90" style=" margin-top:20px;margin-left:20px"> </div>
<div align="center" id="fondo">
<img src="images/Morelco/Imagen1.jpg" name="Fotos" align="right" width="300" height="150" id="Fotos" style=" margin-right:30px; margin-top:20px"></div>
<script language="JavaScript">
RunSlideShow("Fotos","images/Morelco/Imagen1.jpg;images/Morelco/Imagen2.jpg;images/Morelco/Imagen3.jpg;images/Morelco/Imagen4.jpg;images/Morelco/Imagen4.jpg",2);
</script>
</div>
<div id="bg">
<center><img src="images/letrero.png" width="500" height="200" style="margin-top:27px;margin-left:150px"></center>
</div>
<div id="bg" style="margin-top:176px; z-index:1; ">
<table width="1419" cellpadding="0" cellspacing="0" style=" z-index:1 ">
<tr><td>
<ul class="menu" id="menu">
<li><a href="#" class="menulin"></a></li>
<li><a href="#" class="menulink">Inicio</a> </li>
<li><a href="#" class="menulink">Nomina</a></li>
<li>
<a href="#" class="menulink">Facturacion</a>
<ul>
<li><a href="#" class="sub">Actas de liquidacion</a>
<ul>
<li class="topline"><a href="#">ALP 01</a></li>
<li><a href="#">ALP 02</a></li>
<li><a href="#">ALP 03</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Orden de Trabajo</a>
<ul>
<li class="topline"><a href="#">Nueva OT</a></li>
<li><a href="#" class="sub">Buscar OT</a></li>
</ul>
</li>
<li><a href="#" class="sub">Reportes</a>
<ul>
<li class="topline"><a href="#">Ingresar Reporte</a></li>
<li><a href="#">Buscar Reporte</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Viaticos</a>
<ul>
<li><a href="#">Nuevo Viatico</a></li>
<li><a href="#" class="sub">Buscar Viatico</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul></li>
</ul>
</li>
<li>
<a href="#" class="menulink">Personal</a>
<ul>
<li><a href="#">Ingresar H.V</a></li>
<li><a href="#" class="sub">Buscar Personal</a>
<ul>
<li class="topline"><a href="#">Buscar por Nombre</a></li>
<li><a href="#">Buscar por Cedula</a></li>
</ul>
</li>
<li><a href="#">Actualizar H.V</a></li>
<li><a href="#">Eliminar H.V</a></li>
</ul>
</li>
<li><a href="#" class="menulin"></a></li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</td></tr></table>
</div>
<div id="content">
<div id="div4_example" style="margin-top:300px; margin-left:3px"></div>
<iframe width="800"></iframe>
</div>
</div>
</body>
</html>
ese es mi codigo de la pagina
este el es CSS del menu
Código PHP:
body {margin:25px; font:13px Verdana,Arial;font-weight: bold}
ul.menu {list-style:none; margin:0; padding:0; border-spacing:0;background:url(images/prueba.png)}
ul.menu * {margin:0; padding:0;background:url(images/prueba.png)}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:0px;}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none; margin-top:8px;}
ul.menu ul li {position: relative; border:0px solid #aaa; border-top:none; width:184px; margin:0}
ul.menu ul li a {display:block; padding:12px 7px 5px; background-color:}
ul.menu ul li a:hover {background:url(images/men2.png)}
ul.menu ul ul {left:184px; top:12px}
ul.menu .menulink { border:none;padding:12px 6px 6px; font-weight:bold;width:184px}
ul.menu .menulin { border:none;padding:12px 6px 6px; font-weight:bold;width:207px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/men2.png)}
ul.menu .sub {background:url(images/prueba.png); 175px 8px no-repeat}
ul.menu .topline {border-top:1px solid white}
y este es el JS del Menu
Código PHP:
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*160)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
