jQuery slideDown debajo botón de menú se mueve todos los otros botones en FF

Question

He estado trabajando en un menú y haga que sea perfecto estado de funcionamiento en Chrome / Safari. La URL es http://www.penuli.nl/aboutvanwow.html .

Pero FF me está dando un tiempo duro con la información sobre herramientas. Cada vez que vuelo estacionario sobre un botón, todos los otros botones (que son divs dentro de un elemento de la lista) Saltar hasta la parte inferior de su padre, el elemento de la lista. No puedo entender por qué lo hacen, ya que todos los elementos son lo suficientemente grandes como para caber en uno al otro sin 'empujando' otros elementos alrededor.

en el cuadro Comentario es un enlace a una ilustración que MADE sobre el menú (No tengo suficientes puntos de reputación a publicar imágenes)

Lo que hace que sea tal vez un poco más complicado (pero no debe tiene nada que ver con ello), es que la Animación de los botones en la página. Esto significa que su posición es relativa.

He encontrado una solución gracias a ustedes de Stackoverflow, leyendo otra pregunta, pero esto significaría que tengo que cambiar mi animación: overflow: hidden funciona cuando lo aplico al elemento de lista, pero tengo una animación después de eventos de clic que hace que todo el botón de 'caída' de la página. Cuando nada funciona puedo cancelar por supuesto que la animación, es más importante que el sitio funciona perfectamente y luego una animación más o menos, pero una solución que funcione para ambos sería excelente! Gracias de antemano.

---

Algunos CSS (sin algunas líneas para la animación de inicio y fin):

#wrap ol#menu{
margin-left: 0;
padding-left: 0;
width: 1000px;
height: 160px;
}

#wrap ol#menu li{
display: inline-block;
list-style-type: none;
width: 138px;
height: 160px;
background-image: url("/images/backgroundbutton.png");
background-repeat:no-repeat;
background-color: white;
cursor: pointer;
position: relative;
z-index: 0;
}

#wrap ol#menu li .button{
width: 138px;
height: 82px;
z-index: 2;
position: relative;
background-repeat:no-repeat;
}

ol#menu li:nth-child(7n+1) .button {
background-image: url("/images/button-1.png");
}

#wrap ol#menu li .tooltip{
background-image: url("/images/tooltip.png");
position: relative;
background-repeat:no-repeat;
top: -30px;
width: 138px;
height: 130px;
z-index: 1;
display: none;
}

Answer 1

haciendo que los elementos de la lista flotante puede arreglar el problema.

en la regla #wrap ol#menu li, intercambio:

display: inline-block;

por:

float:left;

(manteniendo el display: inline-block no es un problema, pero ya no es necesaria ya que los elementos están flotando)

Answer 2

Vaya, que es bastante raro. Tal vez cambiar los elementos de lista a una colección de divs?