Menu desplegable en Firefox

cfranco · #1 (**permalink**) 03/08/2008, 04:02

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 {background: url(img/pro_drop4_2a.gif);} 
.preload1 {background: url(img/pro_drop4_2b.gif);} 
 
.prodrop4 {padding:0 0 0 32px; margin:0; list-style:none; height:36px; background:transparent url(img/pro_drop4_back.gif); position:relative; z-index:500; font-family:arial, verdana, sans-serif;} 
.prodrop4 li.top {display:block; float:left;} 
.prodrop4 li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#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:left; display:block; padding:0 20px 0 10px; height:36px;background:url(img/pro_drop4_0b.gif) right 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.gif) no-repeat right top;} 
 
.prodrop4 li:hover &gt; a.top_link {color:#000; background: url(img/pro_drop4_2a.gif) no-repeat; line-height:25px;} 
.prodrop4 li:hover &gt; a.top_link span {background:url(img/pro_drop4_2b.gif) no-repeat right top;} 
 
 
.prodrop4 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} 
 
.prodrop4 a:hover {visibility:visible; position:relative; z-index:200;} 
.prodrop4 li:hover {position:relative; z-index:200;} 
 
.prodrop4 ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding: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:0; top:35px; background: #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:block; height:20px; position:relative; font-weight:normal; width:auto;} 
.prodrop4 :hover ul li a {display:block; font-size:11px; height:20px; line-height:20px; width:auto; padding:0 10px; color:#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.

Mikmoro · #2 (**permalink**) 03/08/2008, 04:31

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

cfranco · #3 (**permalink**) 03/08/2008, 12:49

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.

Mikmoro · #4 (**permalink**) 03/08/2008, 15:41

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

.prodrop4 :hover ul

No creo.