Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/05/2007, 03:33
yeyocp
 
Fecha de Ingreso: octubre-2006
Mensajes: 50
Antigüedad: 17 años, 6 meses
Puntos: 0
ayuda con menu deplegable

Hola a todos. Tengo hecho un menu desplegabla con el siguiente codigo:

<html>
<head>
<TITLE>
</TITLE>

<style>
A:Hover { color:white; text-decoration:none; }
A { color:royalblue; text-decoration:none; font-size: 10pt; font-family: Verdana, Arial }
</style>

<SCRIPT LANGUAGE="Javascript">

ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))
ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))

if (ns4) {
layerRef="document.layers";
styleRef="";
} else {
layerRef="document.all";
styleRef=".style";
}

function afficheCalque(calque)
{
eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "visible"');
}

function cacheCalque(calque)
{
eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "hidden"');
}

</SCRIPT>

</head>

<%@ taglib uri="/html" prefix="html" %>
<%@ taglib uri="/logic" prefix="logic" %>

<body>

<table width="55" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF9933">
<tr>
<td align="left">
<div id=div10 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;">
<div id=div11 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;"><html:link href="home.do">Inicio</div></html:link>
<div id=div12 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;"><html:link href="logoff.do">Salir</div></html:link>
</div>
</td>
</tr>
</table>

<table border=0 align="left" cellpadding=0 cellspacing=0>
<tr>

<td align="left">
<div style="background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove;" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">
<center><a href=# onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">CLIENTES</a></center>
</div>
</td>
</tr>
<tr>
<td align="left">
<div id=div100 onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')" style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove; visibility: hidden">
<div id=div13 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="registrarCliente.jsp" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Nuevo Cliente</a>
</div>
<div id=div14 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="verClientes.do" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Ver Clientes</a>
</div>
<div id=div15 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="introducirNif.jsp" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Buscar Clientes</a>
</div>
</div>
</td>

</tr>
</table>
</body>
</html>

Lo que ocurre es que al incluir este menu en mi pagina, ocupa tanto la franja CLIENTES como lo que ocuparía el menú con las opciones del menú cliente de modo que cuando no esta desplegado aparece un espacio en blanco grande. ¿Cómo podría hace para que digamos que el menú sólo ocupara una franja y al desplegarlo el submenú se superpusiera a lo que haya por debajo de la página? Saludos.