Desarrollo Web /

Problema con menu desplegable en CSS en IE6

Participa en el tema Problema con menu desplegable en CSS en IE6 en el foro Desarrollo Web.
Hola a todos... estoy dandole vueltas a esto y no logro solucionarlo.. probe poniendo z ...

Buscar en este tema:
 
  •  
    #1 Problema con menu desplegable en CSS en IE6
    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:



    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>
    +
     
    0
    Me gusta
     
    | Más
  • #2 Re: Problema con menu desplegable en CSS en IE6

    Agrégale esto en esta sentencia:

    .menu4 ul li ul li {
    height:20px;
    line-height:20px;
    position: relative; // Creo q esto faltaba
    }
    Me gusta este mensaje
  • #3 Re: Problema con menu desplegable en CSS en IE6

    lo probe y no anduvo :/ .... gracias igual!
    Me gusta este mensaje


Estadísticas del tema
  • 2 RESPUESTAS
  • 2301 VISTAS
  • 2 USUARIOS RESPONDIERON
 
Ir arriba
Contacto | Acerca de | Ayuda | Términos Legales | privacidad | Pautas de convivencia | Mapa de los foros | TrabajÁ con nosotros
©2008 Psicofxp.com S.A. - Todos los derechos reservados
Certifica IAB