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:
menu.css/* 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;
}
Código:
pagina.php#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;
}
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>
Gracias de antemano.
