Mostrar Menú Por Encima De Un Div

southern · #1 (**permalink**) 20/06/2012, 15:59

Buenas chicos, tengo un problemilla, estoy haciendo una web usando varios divs absolutos, y en uno de ellos tengo un menú desplegable que al abrirse se muestra por debajo del div llamado "principal"... ¿Qué debo hacer para que se despliegue por encima de éste?

Adjunto imagen donde se ve lo que explico.

Espero que alguien me pueda echar un cable y si necesitan cualquier tipo de información me lo dicen y lo pongo aquí en un momeneto :)

Un saludo y gracias de antemano!

EDIT: Por si fuese relevante, el menú del div izquierdo lo cargo con un include php, es decir, es un html a parte.

galmac12 · #2 (**permalink**) 20/06/2012, 16:40

seria bna ida q pusieras tu codigo para ver como lo estas estructurando pero lo mas seguro es q tengas q utilizar el z-index

[URL="http://www.w3schools.com/cssref/pr_pos_z-index.asp"]Mira este ejemplo[/URL]

southern · #3 (**permalink**) 20/06/2012, 17:13

Adjunto el código pues :)

CSS:

Código:

body {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: black;
	background-color: white;
	
	}





#Contenedor { width: 100%; height: 100%; }

#Superior { position: absolute; top:0; left:0; width:90%; height:14%; overflow:auto; }

#Pubi   {   position: absolute; top: 15%; left: 0; width: 20%; height:81%; overflow:hidden;  }

#Banner {   position: absolute; top: 9%; left: 16%; width:68%; height:5%; overflow: auto;  }

#Ppal   {   position: absolute; top: 15%; left:16%; width:55%; height:71%; overflow: auto; z-index: -1; padding-left: 50px;  }

#Auxi   {   position: absolute; top: 14%; left:61%; width:23%; height:71%; overflow: auto; padding-top: 1%; }

#Pubd   {   position: absolute; top: 15%; left: 85%; width: 15%; height: 81%; overflow:auto; color: #07a747; }

#Pie   {   position: absolute; top: 96%; left:16%; width:68%; height: 4%; overflow: auto; text-align: center; }

index.php

Código:

<html>
<head>
<title>Nutrici&oacute;n A La Carta</title>
<link rel="stylesheet" type="text/css" href="layout.css" />


</head>
<body>

<div id="Contenedor">

<div id="Superior"><img src="logo.png" height="100%" /></div>

<div id="Pubi"> 

<p>.</p><p><?php include("menu.html"); ?></p>

</div>

<div id="Pubd"><b>&Uacute;ltimas Novedades</b><br/><br/>Bla Bla Bla<br/><br/>Bla Bla Bla<br/><br/>Bla Bla Bla<br><br/><img src="fb.png"/><img src="twitter.png"/><img src="youtube.png"/> </div>

<div id="Ppal">


<h1 style="color: #07a747;">Inicio</h1>
<p style="text-align: justify;">Bienvenidos a este peque&ntilde;o rinc&oacute;n dedicado a la salud, y en concreto a la nutrici&oacute;n. En el encontramos conocimientos, actualidad y un servicio personalizado.</p>
<p style="text-align: justify;">Mi carrera profesional se ha desarrollado en &aacute;mbitos muy dispares entre s&iacute;, pero todos con un nexo en com&uacute;n, la alimentaci&oacute;n, lo que me ha permitido seguir creciendo como profesional.</p>
<p style="text-align: justify;">Son varios los motivos que me han impulsado a crear este servicio, pero podemos destacar dos principales. </p>
<p>Por un lado, el amplio conocimiento que existe sobre el campo de la nutrici&oacute;n, y aun contin&uacute;a expandi&eacute;ndose gracias a los diferentes estudios que se llevan a cabo y a los profesionales que se dedican ello. Uno de los objetivos de esta web es mantenerse al d&iacute;a sobre todos los hallazgos y actualidades que tienen que ver con la nutrici&oacute;n, y siempre sobre una base cient&iacute;fica. &iexcl;Se acabaron los falsos mitos!</p>
<p>Y por otro lado, llevar todos estos conocimientos a la pr&aacute;ctica con ustedes en sus casas o empresas. Adem&aacute;s de la ventaja y comodidad que conlleva un servicio a domicilio, este es personalizado, ofreciendo diferentes servicios para cubrir sus necesidades. </p>
<p>Ahora si les he dejado con la miel en los labios, les invito a que conozcan en detalle mi p&aacute;gina web y se pongan en contacto conmigo.</p>
<p><b>TODAS LAS DIETAS SE PUEDEN ADAPTAR EN MENOR O MAYOR MEDIDA A LOS DIFERENTES COMENSALES.</b></p>




</div>

<div id="Pie">Pie de p&aacute;gina. El verde es: #07ba21</div>

Y lo siguiente es una buena pedrada de código, espero que se pueda ver bien:

menu.html :

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="all" />
<title>jQuery Vertical Mega Menu Plugin v 1.1</title>
<link href="css/vertical_menu_basic.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcverticalmegamenu.1.1.js'></script>
<script type="text/javascript">
$(document).ready(function($){
	$('#mega-1').dcVerticalMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'slide',
		direction: 'right'
	});
});
</script>
</head>
<body>
<div class="wrap">
<div class="demo-container clear">
<div class="dcjq-vertical-mega-menu">
<ul id="mega-1" class="menu">
<li id="menu-item-0"><a href="#">Home</a></li>
<li id="menu-item-1"><a href="#">Dietas</a>
<ul>
<li id="menu-item-4"><a href="#">Control de Peso</a>
<ul>
<li id="menu-item-19"><a href="#">Adelgazamiento</a></li>
<li id="menu-item-20"><a href="#">Coger Peso</a></li>
<li id="menu-item-21"><a href="#">Mantenimiento</a></li>
</ul>
</li>
<li id="menu-item-6"><a href="#">Para Distintas Etapas</a>
<ul>
<li id="menu-item-25"><a href="#">Ni&ntilde;os Lactantes<br/> (0-6 meses)</a></li>
<li id="menu-item-26"><a href="#">Ni&ntilde;os Lactantes<br/> (6-12 meses)</a></li>
<li id="menu-item-27"><a href="#">Ni&ntilde;os</a></li>
<li id="menu-item-27"><a href="#">Adolescentes</a></li>
<li id="menu-item-27"><a href="#">Edad Avanzada</a></li>
<li id="menu-item-27"><a href="#">Lactancia</a></li>
<li id="menu-item-27"><a href="#">Menopausia</a></li>
<li id="menu-item-27"><a href="#">Deportistas</a></li>

</ul></li>
<li id="menu-item-7"><a href="#">Espec&iacute;ficas</a>
<ul>
<li id="menu-item-28"><a href="#">Diab&eacute;ticos</a></li>
<li id="menu-item-29"><a href="#">Cardiovasculares/Dislipemias</a></li>
<li id="menu-item-30"><a href="#">Hipertensi&oacute;n Arterial</a></li>
<li id="menu-item-28"><a href="#">Obesidad</a></li>
<li id="menu-item-29"><a href="#">Anemias</a></li>
<li id="menu-item-30"><a href="#">Osteoporosis</a></li>
<li id="menu-item-28"><a href="#">Alergias e Intolerancias</a></li>
<li id="menu-item-29"><a href="#">Patolog&iacute;as Digestivas</a></li>
<li id="menu-item-30"><a href="#">Patolog&iacute;as Renales</a></li>
<li id="menu-item-28"><a href="#">Enfermedades Hep&aacute;ticas</a></li>
<li id="menu-item-29"><a href="#">Enfermedad Pulmonar Obstructiva</a></li>
<li id="menu-item-30"><a href="#">Vegetarianos</a></li>
</ul></li>


</li>


</ul>
<li id="menu-item-0"><a href="#">T&eacute;cnicas Culinarias</a></li>
<li id="menu-item-0"><a href="#">Juegos</a></li>
<li id="menu-item-0"><a href="#">Ejercicios F&iacute;sicos</a></li>
</li>






<li id="menu-item-3"><a href="#">Empresas</a>
<ul>
<li id="menu-item-47"><a href="#">Colegios</a></li>
<li id="menu-item-48"><a href="#">Residencias</a></li>
<li id="menu-item-47"><a href="#">Empresas e Instituciones</a></li>
<li id="menu-item-48"><a href="#">Cursos</a></li>
<li id="menu-item-47"><a href="#">Charlas Instructivas</a></li>
<li id="menu-item-48"><a href="#">Visita de Sanidad</a></li>
<li id="menu-item-47"><a href="#">Organizaci&oacute;n de Trabajo</a></li>
<li id="menu-item-48"><a href="#">Talleres</a></li>
</ul></li>

<li id="menu-item-0"><a href="#">Actualidad</a></li>
<li id="menu-item-0"><a href="#">Videos</a></li>
<li id="menu-item-0"><a href="#">Formaci&oacute;n</a></li>
<li id="menu-item-0"><a href="#">Contacto</a></li>





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

Cualquier cosilla que te pueda aclarar me lo dices a ver si entre los dos lo conseguimos :)

Un saludo y gracias por tomarte el tiempo de contestar!