[SOLUCIONADO] Problema con visualización en Firefox

[jairomelo]

Hola a todxs,

Mi problema básicamente es con la visualización de un sitio en firefox. La dirección de la web es: http://sasaingalemana.com, y me basé en la plantilla [URL="http://www.html5xcss3.com/2012/03/html5-template-genesis-business.html"]Genesis [/URL]de TemplateMonster ; el cambio fundamental, y que fue el que me generó problemas, fue cambiar el menú horizontal sencillo a un menú horizontal desplegable.

Al subirlo y testear el sitio en Chrome y en IE no hubo problema, pero en Firefox el Slide y los banners aparecen a la mitad del sitio. Pasé el sitio por [URL="http://browsershots.org/http://sasaingalemana.com/"]http://browsershots.org/[/URL], y me mostró que en efecto el problema es con Firefox en cualquier versión y SO. Ahora, supongo que esto se debe al cambio que hice en el header del sitio para que pudiese verse el menú deplegable.

El HTML del menú es:

Código:

<header>
  	<div class="mainheader" style="position:relative; z-index:9999;">
      <h1><a href="index.html"><img src="images/logo.png" alt=""></a></h1>
      <nav>
          <ul class="menu">
              <li><a href="index.html">Inicio</a></li>
            <li><a href="sasa.html">SASA</a></li>
            <li><a href="procesos.html">Procesos</a></li>
              <li><a href="#">Productos</a>
              	<ul>
           		  <li style="z-index:101;"><a href="anticaidas.html">Anticaídas</a></li>
		          <li><a href="ergo.html">Ergo</a></li>
        	    </ul>
              </li>
            <li><a href="clientes.html">Clientes</a></li>
              <li class="current"><a href="contacto.html">Contacto</a></li>
          </ul>    
      </nav>
    </div> 
</header>

y el del Slide y banner es:

Código:

<section id="header-content">
  <div class="main">
    <div class="sub-page-banner page2-banner">
       <p><strong class="font-1">Contáctenos</strong><strong class="font-2">desde cualquier</strong><strong class="font-1">lugar de</strong><strong class="font-2">Colombia</strong></p>
    </div>
  </div>
</section>

El CSS para esta sección es:

Código:

/***********************************************************************/
.mainheader {
	width:940px;
	margin:0 auto;
	overflow:visible;
	position:relative;
	visibility: visible;
}
.main {
	width:940px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
	visibility: visible;
}

/*********************************header*************************************/
header {
	width:100%;
	background:url(../images/header-bg.gif) 0 0 repeat;
	margin:0 auto;
	z-index:101;
	position:relative;
	z-index:100;
}

h1 {float:left; margin:16px 0 16px 0px;}

.menu,
.menu ul,
.menu li,
.menu a {margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.menu {
	margin: 15px 0 0 0;
	float:right;
	background:url(../images/header-bg.gif) 0 0 repeat;
	border-radius: 5px;
}
 
.menu li {
	position: relative;
	list-style: none;
	float: left;
	line-height: 20px;
	margin: 10px 0px 0 2px;
	display: block;
	height: 42px;
}

.menu li a {
    display: block;
    padding: 0 16px;
    margin: 6px 0;
    line-height: 20px;
    text-decoration: none;
	font-size: 16px;
	color: #f3f3f3;
	display:inline-block;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    transition: color .2s ease-in-out;
}
 
.menu li:first-child a { border-left: none;}
.menu li:last-child a{ border-right: none;}
 
.menu li:hover > a { color: #E93E4A; }
.menu li.current a { color: #E93E4A; }
.menu ul {
	position: absolute;
	top: 40px;
	left: 0;
	opacity: 0;
	background:url(../images/header-bg.gif) 0 0 repeat;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
 
.menu li:hover > ul { opacity: 1;}
 
.menu ul li {
	padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
 
.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu ul li a {
    width: 90px;
    padding: 4px 0 4px 18px;
    margin: 0;
	border: none;
    border-bottom: 1px solid #353539;
}
 
.menu ul li:last-child a { border: none; }


#header-content {width:100%; background:url(../images/header-content-bg.gif) 0 0 repeat; margin:0 auto; position:relative; z-index: 99;}
.sub-page-banner {width:940px; height:369px; margin:30px 0 30px 0;}
.page2-banner {background:url(../images/page2-banner.jpg) 0 0px no-repeat;}
.page3-banner {background:url(../images/page3-banner.jpg) 0 0px no-repeat;}
.page4-banner {background:url(../images/page4-banner.jpg) 0 0px no-repeat;}
.page5-banner {background:url(../images/page5-banner.jpg) 0 0px no-repeat;}
.page6-banner {background:url(../images/page6-banner.jpg) 0 0px no-repeat;}

.sub-page-banner p {padding:47px 0 0 80px;}
.sub-page-banner strong { display:block; color:#fff; margin-top:-34px; }
.sub-page-banner strong:first-child {margin-top:0 !important;}
.sub-page-banner strong+strong+strong {margin-top:-23px !important;}
.sub-page-banner strong+strong+strong+strong {margin-top:-34px !important;}
.font-1 { font-size:50px; line-height:60px; letter-spacing:-3px;}
.font-2 {font-size:100px; line-height:120px; letter-spacing:-4px;}

Mis estimados amigos, estoy enredadísimo con esto... ¿alguien me puede ayudar?

Un saludo

[al_limon]

Mmm.. no soy la más indicada para ayudarte con este tema, pero si te puedo facilitar una web con una lista de ejemplo de menus inline desplegables que quizá, mirando sus códigos, te pueda ayudar a resolver tu problema:

http://araudi.net/ejemplos/menus_desplegables_CSS.html


suerte!

[jairomelo]

Muchas gracias al_limon :), aunque realmente no solucioné el problema, jajajaja... Tuve que realizar un truquito medio tramposo... pero bueno, ya aprendí a tener más cuidado con el estilo overflow...