Visualizar menu encima de otras capas

[neodani]

Buenas!

No salgo de una y entro en otra. He probado jugando con los z-index pero ya no se me ocurre nada más. Al final los he quitado. He probado darle z-index con valores bajos a los wrappers y valor alto al div menu, pero nada...

Tengo dos hojas de estilo. En una, la estructura base y otra el menu web (de otro post).

Resulta que cuando el menu se desplega, sus opciones quedan por debajo de las capas siguientes.

base.css

Código:

/* CSS Document */
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body {margin:0.5em;}

body {
	background:#9343B9;
	text-align:center;
	padding:0;
	font:normal 0.8em/1.2em verdana,aria,sans-serif;
	color:#666;
	}
a {
	color:#FFF;
	text-decoration:none;
	border-bottom:1px dotted;
	}
a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#wrapper1 {
	position:relative;
	text-align:left;
	width:100%;
	background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
	}
#wrapper2 {
	position:relative;
	text-align:left;
	width:100%;
	background:url("../images/leftcolor_bg.gif") repeat-y top left;
	}
#header {
	background:#BB62AB;
	padding:10px;
	margin:0;
	text-align:center;
	color:#FFF;
	height:60px;
	}
#header h1 {
	font-size:200%;
	}
#header a:hover {
	color:#7A2875;
	}
#maincol {
	position:relative;
	margin:0;
	padding:10px;
	}
#leftcol { 
	position:relative;
	top:-10px;
	left:-10px;
	float:left;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#ECB9E8;
	z-index:100;
	}
#rightcol {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#D7C4FA;
	z-index:99;
	}
#centercol {
	position:relative;
	padding:0 240px;
	}
#centercol a {
	color:#666;
	}
#centercol a:hover {
	border-bottom:1px solid;
	color:#9343B9;
	}
#footer {
	position:relative;
	top:1px;
	background:#7A2875;
	width:100%;
	clear:both;
	margin:0;
	padding:1% 0;
	text-align:center;
	color:#CCC;
	}

menu.css

Código:

#menu {
font-size: 0.7em;
width:100%;
float:left;
background:#69CFDB;
text-align:left;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 { float: left;
margin-right: 1px;
}
#menu ul li a {display: block;
text-decoration: none;
white-space:nowrap;
margin:0;
font-size:12px;
color:#FFF;
font-weight:bold;
padding: 6px 8px;
}
#menu ul li a.nivel2 {
border-left:3px solid #353535;
color:#000;
background:#a2e3e7 url(../../imagenes/header/arrow_right_black.gif) no-repeat right 8px;
}
#menu ul li a.nivel2:hover {
border-left:3px solid #353535;
color:#000;
background:#69CFDB url(../../imagenes/header/arrow_right_black.gif) no-repeat right 8px;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {/*background-color: #6CC;*/
color: #000;
position: relative;
background:#69CFDB;
}
/* flecha desplegable */
#menu ul li a.nivel1{
background:#69CFDB url(../../imagenes/header/arrow_down_white.gif) no-repeat right 10px;
padding-right:15px;
}
#menu ul li:hover a.nivel1{
background:#69CFDB url(../../imagenes/header/arrow_down_white.gif) no-repeat right 10px;
padding-right:15px;
}
/* fin flecha desplegable */

#menu ul li a.nivel1, #menu ul li a.nivel2 {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: 0px;background-color: #a2e3e7;border: solid 1px #69cfdb;
}
#menu ul li a:hover ul li ul, #menu ul li:hover ul li ul{display: none;
}
#menu ul li ul li a:hover ul, #menu ul li ul li:hover ul {display: block;
position: absolute;left: 164px;top:-1px!important;top: -31px;
}
#menu ul li ul li a {width: 145px;
border-top-color: transparent;
padding: 6px 8px;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
#menu ul li ul li ul li a.primera {border-top-color: #fff;}

table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

pagina.php

Código PHP:

  <!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> 
<title>3 columnas</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" href="menu.css" type="text/css" /> 
<link rel="stylesheet" href="base.css" type="text/css" /> 
<!--[if IE]><style>#menu ul li ul li a{margin-bottom:-1px;border-top-color: #fff;} #menu ul.nivel2{margin-top: -1px;}</style><![endif]--> 
<!--[if IE 7]><style>#menu ul li ul li.nivel2:hover{margin-bottom:-2px;}</style><![endif]--> 
</head> 
 
<body> 
<div id="header"><!-- begin header --> 
    <div id="menu"> 
    <ul> 
      <li class="nivel1"><a href="#" class="nivel1">Opción 1</a> 
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]--> 
        <ul class="nivel2"> 
            <li><a href="#">Opción 1.1</a></li> 
            <li><a href="#">Opción 1.2</a></li> 
        </ul> 
 
    <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
      </li> 
      <li class="nivel1"><a href="#" class="nivel1">Opción 2</a> 
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]--> 
        <ul class="nivel2"> 
            <li><a href="#">Opción 2.1</a></li> 
            <li><a href="#">Opción 2.2</a></li> 
            <li class="nivel2"><a class="nivel2" href="#">Opción 2.3 »</a> 
 
                <!--[if lte IE 6]><a href="#" class="nivel2ie">Opción 2.3 »<table class="falsa"><tr><td><![endif]--> 
                <ul class="nivel3"> 
                    <li><a class="primera" href="#">Opción 2.3.1</a></li> 
                    <li><a href="#">Opción 2.3.2</a></li> 
                    <li><a href="#">Opción 2.3.3</a></li> 
                </ul> 
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
 
            <li><a href="#">Opción 2.4</a></li> 
            <li><a href="#">Opción 2.5</a></li> 
        </ul> 
    <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
    </li> 
      <li class="nivel1"><a href="#" class="nivel1">Opción 3</a> 
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]--> 
        <ul class="nivel2"> 
            <li><a href="#">Opción 3.1</a></li> 
 
            <li><a href="#">Opción 3.2</a></li> 
            <li><a href="#">Opción 3.3</a></li> 
        </ul> 
    <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
    </li> 
      <li class="nivel1"><a href="#" class="nivel1">Opción 4</a> 
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]--> 
        <ul class="nivel2"> 
            <li><a href="#">Opción 4.1</a></li> 
 
            <li><a href="#">Opción 4.2</a></li> 
            <li><a href="#">Opción 4.3</a></li> 
            <li><a href="#">Opción 4.4</a></li> 
        </ul> 
    <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
    </li> 
      <li class="nivel1"><a href="#" class="nivel1">Opción 5</a> 
    <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]--> 
 
        <ul class="nivel2"> 
            <li><a href="#">Opción 5.1</a></li> 
            <li><a href="#">Opción 5.2</a></li> 
            <li><a href="#">Opción 5.3</a></li> 
        </ul> 
    <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
    </li> 
    </ul> 
    </div> 
 
</div><!-- end header --> 
 
<div id="wrapper1"><!-- sets background to white and creates full length leftcol--> 
     
    <div id="wrapper2"><!-- sets background to white and creates full length rightcol--> 
     
        <div id="maincol"><!-- begin main content area --> 
                 
            <div id="leftcol"><!-- begin leftcol --> 
                <p>This is the left column</p> 
            </div><!-- end leftcol --> 
                 
            <div id="rightcol"><!-- begin rightcol --> 
                <p>This is the right column</p> 
            </div><!-- end righttcol --> 
             
            <div id="centercol"><!-- begin centercol --> 
                <p>This is the center column </p> 
            </div><!-- end centercol --> 
                 
        </div><!-- end main content area --> 
                 
        <div id="footer"><!-- begin footer --> 
            <p>This is the footer</p> 
        </div><!-- end footer --> 
     
    </div><!-- end wrapper1 --> 
 
</div><!-- end wrapper2 --> 
     
</body> 
</html>  
   

Una imagen de lo que me sucede


Gracias de antemano.

[Mikmoro]

Todo elemento que tenga posición relativa o absoluta podrá aceptar el z-index para su posición en Z, y los elementos según van apareciendo en el html se van colocando encima de sus antecesores.

De maera que comprueba que:

- todos los elementos implicados tienen posición absoluta o relativa
- a todos les es asignado un z-index.

En tu caso concreto:
- asigna un z-index:1; al selector #wrapper1
- añade z-index: 2; position: relative; al selector #menu

[neodani]

Iniciado por Mikmoro

Todo elemento que tenga posición relativa o absoluta podrá aceptar el z-index para su posición en Z, y los elementos según van apareciendo en el html se van colocando encima de sus antecesores.

De maera que comprueba que:

- todos los elementos implicados tienen posición absoluta o relativa
- a todos les es asignado un z-index.

En tu caso concreto:
- asigna un z-index:1; al selector #wrapper1
- añade z-index: 2; position: relative; al selector #menu

Lo hacia bien, lástimam que me faltaba saber que todos deben tener posición absoluta o relativa.

Me lo apunto. Gracias Mikmoro