Foros del Web » Creando para Internet » CSS »

Menu desplegable en Firefox

Estas en el tema de Menu desplegable en Firefox en el foro de CSS en Foros del Web. Desde hace un tiempo vengo practicando hojas de estilo, pero siempre lo habia hecho en el Explorer, el problema surge cuando quiero probar un menu ...
  #1 (permalink)  
Antiguo 03/08/2008, 05:02
Avatar de cfranco  
Fecha de Ingreso: enero-2008
Ubicación: Barcelona - España
Mensajes: 182
Antigüedad: 9 años, 10 meses
Puntos: 6
Menu desplegable en Firefox

Desde hace un tiempo vengo practicando hojas de estilo, pero siempre lo habia hecho en el Explorer, el problema surge cuando quiero probar un menu desplegable, pero cuando realizo la prueba en el Explorer todo bien, cuando realizo la prueba en Firefox, vaya sorpresa que no me desplega ninguna opcion

El codigo que utilizo es el siguiente:

Código PHP:
<html>

<
head>
<
title>Menu</title>
</
head>
<
style type="text/css">

.
preload1 {backgroundurl(img/pro_drop4_2a.gif);}
.
preload1 {backgroundurl(img/pro_drop4_2b.gif);}

.
prodrop4 {padding:0 0 0 32pxmargin:0; list-style:noneheight:36pxbackground:transparent url(img/pro_drop4_back.gif); position:relativez-index:500font-family:arialverdanasans-serif;}
.
prodrop4 li.top {display:blockfloat:left;}
.
prodrop4 li a.top_link {display:blockfloat:leftheight:36pxline-height:27pxcolor:#666; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 10px; cursor:pointer;background: url(img/pro_drop4_0a.gif) no-repeat;}
.prodrop4 li a.top_link span {float:leftdisplay:blockpadding:0 20px 0 10pxheight:36px;background:url(img/pro_drop4_0b.gifright top;}
.
prodrop4 li a.top_link:hover {color:#000; background: url(img/pro_drop4_2a.gif) no-repeat; line-height:25px;}
.prodrop4 li a.top_link:hover span {background:url(img/pro_drop4_2b.gifno-repeat right top;}

.
prodrop4 li:hover &gta.top_link {color:#000; background: url(img/pro_drop4_2a.gif) no-repeat; line-height:25px;}
.prodrop4 li:hover &gta.top_link span {background:url(img/pro_drop4_2b.gifno-repeat right top;}


.
prodrop4 table {border-collapse:collapsewidth:0height:0position:absolutetop:0left:0;}

.
prodrop4 a:hover {visibility:visibleposition:relativez-index:200;}
.
prodrop4 li:hover {position:relativez-index:200;}

.
prodrop4 ul {position:absoluteleft:-9999pxtop:-9999pxwidth:0height:0margin:0padding:0; list-style:none;}

.
prodrop4 ul.sub1 {width:115px;}
.
prodrop4 ul.sub2 {width:1px;}
.
prodrop4 ul.sub3 {width:90px;}
.
prodrop4 ul.sub4 {width:112px;}

.
prodrop4 :hover ul {left:0top:35pxbackground#fff; padding:3px; border:1px solid #00A397; border-width:0 1px 1px; white-space:nowrap; height:auto; z-index:300;}
.prodrop4 :hover ul li {display:blockheight:20pxposition:relativefont-weight:normalwidth:auto;}
.
prodrop4 :hover ul li a {display:blockfont-size:11pxheight:20pxline-height:20pxwidth:autopadding:0 10pxcolor:#00A397; text-decoration:none;}
.prodrop4 :hover ul li a:hover {background:#00A397; color:#fff;}


</style>

<
body>

<
span class="preload1"></span>
<
span class="preload2"></span>

<
ul class="prodrop4">
    <
li class="top"><a href="#" id="config" class="top_link">Menu 1<!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if 
lte IE 6]><table><tr><td><![endif]-->
        <
ul class="sub2">
            <
li><a href="?menu=estadistica">Submenu11</a></li>
            <
li><a href="?menu=estadistica">Submenu1</a></li>
        </
ul>
        <!--[if 
lte IE 6]></td></tr></table></a><![endif]-->
    </
li>
    <
li class="top"><a href="#" id="config" class="top_link">Menu 2<!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if 
lte IE 6]><table><tr><td><![endif]-->
        <
ul class="sub3">
            <
li><a href="?menu=estadistica">Submenu21</a></li>
            <
li><a href="?menu=estadistica">Submenu22</a></li>
        </
ul>
        <!--[if 
lte IE 6]></td></tr></table></a><![endif]-->
        </
li>
</
ul>
</
body>

</
html
Las imagenes que aparecen no tienen ningun efecto mas que darle un toque de estilo, pero por lo demas el codigo parece estar bien hasta donde yo entiendo.

Estare muy agradecido si alguien podria indicarme el error o el horror que estoy cometiendo.
__________________
Salud y Éxitos
PFI Tube

Última edición por cfranco; 03/08/2008 a las 05:36
  #2 (permalink)  
Antiguo 03/08/2008, 05:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable en Firefox

Aunque la idea va por ahí, creo que tienes un poco de lio en el código.

Mirate este que es casi lo mismo y funciona bien en todos los navegadores, a ver si te da la idea de cómo corregir:

http://www.forosdelweb.com/f53/faqs-...ml#post2443905
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 03/08/2008, 13:49
Avatar de cfranco  
Fecha de Ingreso: enero-2008
Ubicación: Barcelona - España
Mensajes: 182
Antigüedad: 9 años, 10 meses
Puntos: 6
De acuerdo Solucionado: Menu desplegable en Firefox

A que no saben!!!.

Aunque parezca una chorrada el codigo esta bien, el problema ya lo encontre, se me olvido insertar en la primera linea esto :

Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
Llevo 5 dias viendo, intentando, buscando que podria ser y no me lo creo que ese fuera el error.

Gracias Mikmoro por tu colaboracion.
__________________
Salud y Éxitos
PFI Tube
  #4 (permalink)  
Antiguo 03/08/2008, 16:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu desplegable en Firefox

A pesar de eso... ¿por ejemplo este selector te funciona?:

.prodrop4 :hover ul

No creo.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:08.