Problema con submenu

strepor · #1 (**permalink**) 16/03/2011, 02:54

Hola. Estoy haciendo una web que tiene un menú horizontal y uno de las opciones tiene un submenú. No tiene que haber ni transiciones ni nada, símplemente que aparezca el submenú y que funcione. El problema es que debajo hay un flash y el submenú debe de aparecer por encima. Ya sé que hay muchos post explicando cómo hacer para que el flash quede por debajo (y creo que con eso ya no tendré problemas), pero la verdad es que de HTML no sé mucho y lo que me gustaría saber es si me pueden pasar algún enlace donde ver cómo podría hacerlo... ¿sería con capas?. Yo he usado un código que ponían en post de foros del web que es este:

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function mostrar() {
	menu.style.visibility  = "visible";
}
function ocultar() {
	menu.style.visibility = "hidden";
}
</script>
</head>

<body>
<table width="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
  <tr>
    <td width="100" height="20" valign="top" bgcolor="#996600" onMouseOver="mostrar()"  onMouseOut="ocultar()" >Menu 1</td><!--Si el mouse esta encima muestra la tabla menu, si está fuera la oculta.  Importante para que no se vea al ir cambiando de menu1 a menu2, menu3...etc-->
    <td width="100" valign="top" bgcolor="#99FF33">Menu 2</td>
    <td width="100" valign="top" bgcolor="#FF9900">Menu 3</td>
    <td width="100" valign="top" bgcolor="#0099FF">Menu 4</td>
  </tr>
</table>
<table id="menu" width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" onMouseOut="ocultar()"  onMouseOver="mostrar()" style="visibility:hidden"><!--Si el mouse está encima sigue mostrando la tabla menu, si está fuera la oculta -->
  <tr>
	<td >
		<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#CC99FF">Submenu 1</td>
		  </tr>
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#FFFF99">Submenu 2</td>
		  </tr>
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#CC0000">Submenu 3</td>
		  </tr>
		</table>
	</td>
  </tr>
</table>

</div>
</body>
</html>

Y esto me valdría perfectamente si no fuese porque el submenú tiene que aparecer por encima del contenido que haya debajo (sea flash, jpg o más texto) y en este ejemplo al ser con tablas no se puede hacer.

Agradecería cualquier ayuda. Gracias.

paik · #2 (**permalink**) 16/03/2011, 13:03

puedes probar añadiendo divs y z-index: mete el menu en un div le puedes llamar menu por ejemplo y en otro div el contenido, despues les pones de estilos position:absolute y z-index:1 al que quieras que este mas abajo y un z-index mayor de uno a las capas que quieras que salgan por encima, venga haber si te sirve.