JavaScript - Problemas con Menu en Firefox

Hola tengo problemas con un drop-down menu en javascript, en IE funciona todo bien pero en Firefox el drop-dpwn se esconde detras de cualkier componente que haya debajo...la pagina la pueden observar aqui: http://panamarealestatesolutions.com/presbk/

Este es el CSS:

div.sdmenu {
width: 206px;
height: 100%;
font-family: Arial, sans-serif;
font-size: 10px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
Este es el Script:

function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
return false;
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName("div");
this.remember = true;
this.speed = 3;
this.markCurrent = true;
this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}
}
if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}
}
};
SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == "collapsed")
this.expandMenu(submenu);
else
this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
fullHeight += links[i].offsetHeight;
var moveBy = Math.round(this.speed * links.length);

var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight + moveBy;
if (newHeight < fullHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "";
mainInstance.memorize();
}
}, 30);
this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight - moveBy;
if (newHeight > minHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "collapsed";
mainInstance.memorize();
}
}, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
}
};
SDMenu.prototype.expandAll = function() {
var oldOneSmOnly = this.oneSmOnly;
this.oneSmOnly = false;
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className == "collapsed")
this.expandMenu(this.submenus[i]);
this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i < this.submenus.length; i++)
states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
}
};



ALGUNA IDEA DE QUE PUEDA ESTAR CAUSANDO ESTO?????????

Buenas

Acabo de visitar la página con firefox 2.0.0.12, y los menús me salen bien. No sé si ya lo solucionaste, es con otra versión.

Si te sigue pasando en los css usa el z-index, para mover los elementos hacia adelante o hacia atrás, en la página.

Ya contarás.

Ya intente usando el z-index y el menu no me hace el drop down, se queda estatico.
Bueno si tienes alguna otra sugerencia lo agradecería muchisimo ya que llevo días buscando una solución para que el menú no se esconda cuando se haga el drop down. Yo también estoy usando el Firefox 2.0.0.12 lo cual me parece algo raro, de todos modos intenta darle click al menu en donde dice "Beaches" a ver si esconde o no detrás de los Flashes.

Hola

Bueno, consegui reproducir el error, en el ordenador de casa.
Por lo que pude ver con el firebug, siempre tienes los menus expandidos, solo que los ocultas con el alto del div.

Podrías probar lo siguiente (a menos que ya lo hicieras).

Por ejemplo en el div Beach que me comentabas, podrias dejarlo de la siguiente manera

<div id='nomeacuerdo' class='collapsed'>
<span>Beach</span>
<div id='linksBeach'>
<a>lalala</a>
<a>jijiji</a>
<a>los que sean</a>
</div>
</div>

bien, en los estilos tendrias que poner este

#linksBeach{
display:none;
}

Y quitar el estilo collapsed donde encongias el primer div, para dejarlo automatico.

En el onclick del div, lo que tendrias que hacer es pasar la propiedad style.display, de none a block, con esto lo que haces es que tome el tamaño que coja automaticamente, o uno que tu le dieras en los estilos. Cuando esta a none, lo hace desaparecer, no ocupa espacio ni nada, asi que debería encogerte el contendor, dando la sensacion de colapsar el menu, y expandirlo al ponerlo a block

Bueno, no te doy la vara mas, que me parece que me estoy liando, en definitiva eso, prueba con el display=none y display=block.

Espero que esta vez, te sea util, ya contaras.