Hola a todos... estoy dandole vueltas a esto y no logro solucionarlo.. probe poniendo z index a los elementos y demas pero no me anda, tal vez no los estoy colocando donde deberia.
El problema es este:
www . delfinarossi . com . ar/ emilia/ menu_css.jpg
(va con espacios porque sino no me deja :/ )
Tengo un menu en css desplegable.
Al desplegarse queda por debajo de campos imput desplegables....
El error es en ie6, en firefox funciona sin problemas.
Espero que alguien me pueda ayudar...
Dejo el css y estructura del menu:
<style type="text/css">
/* ================================================== ==============
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at cssplay
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
/* commom style for all browsers */
.container4 {
text-align:center;
background:#eee url(img/fondo_bot.jpg);
height:35px;
width:980px;
margin:0 0 0 0; /* for this demo only */
}
.menu4 {
text-align:left;
font-family: verdana, sans-serif;
position:relative;
font-size:12px;
background:transparent;
width:980px;
height:35px;
margin:0 auto;
}
.menu4 ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu4 ul li {
float:left;
position:relative;
height:35px;
color:#FFFFFF;
font-size:12px;
line-height:35px;
}
.menu4 ul li.principal {
/*es lo mismo k arriba creo*/
}
.menu4 ul li a, .menu4 ul li a:visited {
display:block;
text-decoration:none;
/*padding-left:30px;*/
text-align:center;
width:100px;
height:35px;
color:#FFFFFF;
font-size:14px;
letter-spacing:1px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:35px;
}
* html .menu4 ul li a, .menu4 ul li a:visited {
width:130px;
w\idth:100px;
}
.menu4 ul li ul {
visibility:hidden;
position:absolute;
top:0;
left:0;
height:0;
overflow:hidden;
}
.menu4 table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}
/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu4 ul li:hover a, .menu4 ul li a:hover {
border:0;
height:34px;
line-height:34px;
background:transparent url(img/over.jpg);
color:#000000;
font-size:14px;
letter-spacing:1px;
/*border:1px solid #333333;*/
width:100px;
border-bottom:1px solid #333333;
}
.menu4 ul li:hover ul, .menu4 ul li a:hover ul {
visibility:visible;
width:auto;
height:auto;
position:absolute;
top:35px;
/*border:1px solid #333333;*/
/*left:-1px;*/
background:transparent;
overflow:visible;
}
.menu4 ul li ul li {
height:20px;
line-height:20px;
}
.menu4 ul li:hover ul li a, .menu4 ul li a:hover ul li a {
text-align:left;
padding-left:20px;
display:block;
background:transparent url(img/over.jpg);
text-decoration:none;
color:#000000;
font-size:12px;
letter-spacing:1px;
height:19px;
line-height:19px;
/*padding:10px;*/
width:200px;
w\idth:200px;
border-bottom:1px solid #333333;
}
.menu4 ul li:hover ul li a.drop, .menu4 ul li a:hover ul li a.drop {
display:block;
color:#333333;
height:20px;
line-height:20px;
/*padding:10px;*/
width:200px;
w\idth:200px;
}
.menu4 ul li:hover ul li ul, .menu4 ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
top:0;
left:0;
height:0;
overflow:hidden;
}
.menu4 ul li:hover ul li a:hover, .menu4 ul li a:hover ul li a:hover {
color:#FFFFFF;
}
</style>
<div class="container4">
<div class="menu4">
<ul>
<!-- ///////////////////1.NOTICIAS -->
<li class="principal"><a class="drop" href="admin.php">Noticias
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="sub"><a href="admin.php">Listado</a></li>
<li class="sub"><a href="alta.php">Nueva Noticia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- ///////////////////2. BREVES -->
<li class="principal"><a class="drop" href="listado_breves.php">Breves
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="sub"><a href="listado_breves.php">Listado</a></li>
<li class="sub"><a href="alta_breve.php?completar=ok">Nueva Breve</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- ///////////////////3. BANNERS -->
<li class="principal"><a class="drop" href="listado_banners.php">Banners
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="sub"><a href="listado_banners.php">Listado</a></li>
<li class="sub"><a href="alta_banner_home.php">Nuevo Banner Home</a></li>
<li class="sub"><a href="alta_banner.php">Nuevo Banner Columna 2</a></li>
<li class="sub"><a href="alta_encabezado.php">Nuevo Banner Encabezado</a></li>
<li class="sub"><a href="alta_banner_randomicos.php">Nuevo Banner Aleatorio</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- ///////////////////4. EVENTOS -->
<li class="principal"><a class="drop" href="listado_eventos.php">Eventos
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="sub"><a href="listado_eventos.php">Listado</a></li>
<li class="sub"><a href="alta_ev.php">Nuevo Evento</a></li>
<li class="sub"><a href="alta_sup.php">Nuevo Suplemento</a></li>
<li class="sub"><a href="alta_not_sup.php">Nueva Noticia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- ///////////////////5. HISTORIAL -->
<li class="principal"><a href="historial.php">Historial</a></li>
<!-- ///////////////////6. EMAILS -->
<li class="principal"><a class="drop" href="listado_mails.php">E-Mails
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="sub"><a href="listado_mails_copiar.php">Copiar</a></li>
<li class="sub"><a href="listado_mails.php">Editar</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>