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 > a.top_link {color:#000; background: url(img/pro_drop4_2a.gif) no-repeat; line-height:25px;}
.prodrop4 li:hover > 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.