Entrar

Poner el menú desplegable encima de la capa contenido.

franxo31 · · Solicitar retirada
Buenas compañeros, antes que nada felicitar a los creadores y miembros de la web.

Ahora el problema en si, la cuestión está en que he creado una capa con un menu desplegable horizontal, pero cuando pasa el raton por encima los desplegables quedan por debajo de la capa contenido.

¿Alguien sabe como puedo solucionarlo o cual es el problema? Gracias de antemano por la ayuda, os copio los codigos:

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" />
<title>Setas y trufas</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Estilo1 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
body,td,th {
font-family: Times New Roman, Times, serif;
}
-->
</style>
</head>


<body>
<!--inicio de cabecera--->
<div id="cabecera">
<h1 align="center" class="Estilo1">Setas y trufas</h1>
</div>
<!--fin inicio de cabecera-->


<div id="menu">

<div id="navegacion">

<ul>

<li><a href="#">Introducción</a>

<ul>

<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a></li><!--Fin li desplegable-->
</ul><!--Fin ul desplegable-->
</li><!--Fin li principal-->
</ul><!--Fin ul principal-->
<ul>
<li><a href="#">Introducción</a>

<ul>

<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a></li><!--Fin li desplegable-->
</ul><!--Fin ul desplegable-->
</li><!--Fin li principal-->
</ul><!--Fin ul principal-->
<ul>
<li><a href="#">Introducción</a>

<ul>

<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a></li><!--Fin li desplegable-->
</ul><!--Fin ul desplegable-->
</li><!--Fin li principal-->
</ul><!--Fin ul principal-->
<ul>
<li><a href="#">Introducción</a>

<ul>

<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a></li><!--Fin li desplegable-->
</ul><!--Fin ul desplegable-->
</li><!--Fin li principal-->
</ul><!--Fin ul principal-->
<ul>
<li><a href="#">Introducción</a>

<ul>

<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a></li><!--Fin li desplegable-->
</ul><!--Fin ul desplegable-->
</li><!--Fin li principal-->
</ul><!--Fin ul principal-->
<ul>
<li><a href="#">Introducción</a>

<ul>

<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a></li><!--Fin li desplegable-->
</ul><!--Fin ul desplegable-->
</li><!--Fin li principal-->
</ul><!--Fin ul principal-->
<ul>
<li><a href="#">Introducción</a>

<ul>

<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a></li><!--Fin li desplegable-->
</ul><!--Fin ul desplegable-->
</li><!--Fin li principal-->
</ul><!--Fin ul principal-->
<ul>
<li><a href="#">Introducción</a>

<ul>

<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a>
<li><a href="#">Link</a></li><!--Fin li desplegable-->
</ul><!--Fin ul desplegable-->
</li><!--Fin li principal-->
</ul><!--Fin ul principal-->

<br class="clearFloat" />
</div>
<!--Fin navegacion-->

</div><!--Fin menu-->

<div id="contenido">
<p>Contenido</p>
</div>

</body>
</html>


Y el código CSS:

@charset "utf-8";
/* CSS Document */
body {background: url(imagen/bn.gif);}

#cabecera {position:absolute;width:1000px;height:100px;top:10px;background: #FFFFFF;margin-left:4px; margin-right:5px;}

#menu {
position:absolute;
width:1000px;
height:32px;
background: #FFFFFF;
top:100px;
margin-left:4px;
margin-right:5px;
visibility: visible;
}

#navegacion {position:absolute; width:1000px; height:32px; top: 0; margin-left:4px;margin-right:5px; visibility: visible; margin:0;padding:0;}

#navegacion ul {margin:0;padding:0; line-height:30px;}

#navegacion li {margin:0;padding:0;list-style:none;float:left;position:relative; color:#999; background: #FF0000}

#navegacion ul li a { text-align:center; font-family:"Times New Roman", Times, serif; width:123px; height:30px; display:block; text-decoration:none; color: #FFFFFF; border:1px solid #FFF;}

#navegacion ul ul { position:absolute; visibility:hidden; top:32px; display: inline;}

#navegacion ul li:hover ul { visibility:visible;}

/***************************************************************/

#navegacion li:hover { background:#09F; }

#navegacion ul li:hover ul li a:hover { background:#CCC; color:#000000;}

#navegacion a:hover { color:#000000;}

.clearFloat {clear:both; margin:0; padding:0; }

#contenido {position:absolute;width:1000px;height:600px;background: #FFFFFF;top:130px;margin-left:4px; margin-right:5px;}
#contenido p{text-align:center;}


Gracias.
ocbarrio · · Solicitar retirada
prueba a darle valor z-index en estilos, a valor mas alto, mas arriba en el orden de capas, ejemplo: div cabecera zindex 1 estara debajo de div navegacion zindex 2. Espero que asi lo soluciones.

Un saludo!
franxo31 · · Solicitar retirada
Gracias por la respuesta ocbarrio, con tu método no me aclaré al final, la única solución que pude darle fué la de poner la capa menú a continuación de la de contenido y así se solucionó el problema, supongo que será una solución cutre salchichera pero de momento funciona, pero muchísimas gracias por la ayuda.

Saludos.