Hola a todos!
Estoy haciendo una ventana para consultas en la que:
1) Tengo un div que engloba todo para ponerle el 100% de height y width y dentro:
2) tengo un div izquierdo en el que quiero poner el menú de consultas
3) a la derecha de éste un div en el que se carga una tabla con los registros
entonces mi problema es que no consigo que el menú sea una capa que esté superpuesta al resto de div existentes para que cuando se despliegue salga bien y por encima de todo (No se si me entendereis lo que quiero decir)
este es mi html:
Código HTML:
<!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=utf-8" />
<link href="cssInformes/menuIconos.css" rel="stylesheet" type="text/css" />
<title>Documento sin título</title>
</head>
<body>
<!------------------------------------DIV SUPERPUESTO----------------------------->
<div align="center" id="divSuperpuesto_" style="z-index:2; float:left; position: relative !important; margin-left:90px; margin-top:90px">
<!------------------------------------MENU----------------------------->
<div id="menu" style="border:1px solid #000; width:100%">
<ul class="mi-menu">
<li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
<li>
<a href="#"> texto_enlace_2 </a>
<ul>
<li><a href="URL_enlace_2.1"> texto_submenú_2.1 </a></li>
<li><a href="URL_enlace_2.2"> texto_submenú_2.2 </a></li>
<li><a href="URL_enlace_2.3"> texto_submenú_2.3 </a></li>
</ul>
</li>
<li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>
</div>
<!--------------------------------FIN MENU----------------------------->
</div>
<!------------------------------------FIN DIV SUPERPUESTO----------------------------->
<div style=" width:100%; height:100%; position:absolute">
<div class="contTablas" style="height:90%; width:90%; text-align:center; margin:20px auto; overflow:hidden;">
<!--------------------------------------DIV CONTENEDOR MENU-------------------------------------->
<div id="contenedorBotones" style="float:left; clear:both; height:93%; margin:13px 0px 0px 15px; width:15%; "></div>
<!----------------------------------FIN DIV CONTENEDOR MENU-------------------------------------->
<div style="box-shadow:0 0 0 3px #EEF5F7;float:left; height:94%; margin:15px 0px 0px 15px; width:78%;" >
<div id="divBarra" class="barra" style="height:3%; width:100%;" ></div>
<div id="divContenidoConsulta" style="margin-top:0; padding:0; height:84%; width:100%;overflow:auto;overflow-x:hidden;">
</div>
</div>
</div>
</div>
</body>
</html> y mi CSS:
Código:
<style type="text/css">
html,body{
/*margin:0px;*/
height:100%; width:100%;
overflow:hidden;
}
/*------------------DIV CONTENEDOR DE TABLAS-----------------*/
.contTablas{
overflow:auto;
overflow-x:hidden;
border: 10px solid #EEF5F7;
border-radius: 6px;
background-color:#FFFFFF;
}
.barra{
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#e4f1f6', EndColorStr='#cfe6ef');
border: 1px solid #ACC8DD;
padding-top:2px;
}
#divSuperpuesto{
border-radius: 6px;
padding: 18px 18px 18px 18px;
margin-top: 10px;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #CCC inset;
font-family: sans-serif;
font-size: 12px;
color: #798e94;
border: 1px solid #CCC;
margin: 0 auto;
background-image:url(../imagenesModulo2/fondo_opacidad_blanco.png);
cursor:move !important;
}
#menu {
text-align: center;
font-size: 0.7em;
width: 320px;
margin: 20px;
}
#menu ul {
list-style-type: none;
}
#menu ul li.nivel1 {
width: 162px;
}
#menu ul li.primera {
border-top: solid 1px #FFF;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
}
#menu ul li:hover {
position: relative;
background-color: #6CC;
color: #000;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top: -31px;
}
#menu ul li ul li a {
width: 160px;
background-color: #6CC;
color: #000;
}
#menu ul li ul li a:hover {
position: relative;
background-color: #399;
color: #FFF;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}</style>
(el estilo css del menú lo tengo de momento en la misma pagina porque asi me es mas facil ir cambiándole cosas, cuando lo tenga bien lo pondre en un .css )
Gracias de antemano :)