jQuery slideDown sotto pulsante del menu si sposta tutti gli altri pulsanti di FF

Question

Ho lavorato su un menu e lo hanno perfettamente funzionante in Chrome / Safari. L'URL è http://www.penuli.nl/aboutvanwow.html .

Ma FF mi dà un momento difficile con la descrizione comandi. Ogni Ho hover volta su un pulsante, tutti gli altri pulsanti (che sono div all'interno di un elemento della lista) saltare giù al fondo del loro genitore, la voce di elenco. Non riesco a capire il motivo per cui lo fanno, dal momento che tutti gli articoli sono grandi abbastanza da contenere l'uno nell'altro senza 'spingere' altri oggetti intorno.

nella casella commento è un link ad un ILLUSTRAZIONE ho fatto circa IL MENU (Non ho abbastanza punti reputazione alle immagini pubblicare)

La cosa che lo rende forse un po 'più complicato (ma non dovrebbe avuto nulla a che fare con esso), è che i pulsanti animati nella pagina. Ciò significa che la loro posizione è relativa.

Ho trovato un soluzione grazie a voi ragazzi di StackOverflow, la lettura di un'altra domanda, ma questo vorrebbe dire che devo modificare la mia animazione: overflow: hidden funziona quando applico alla voce di elenco, ma ho un'animazione dopo un clic gli eventi che rendono tutto il pulsante 'caduta' in basso nella pagina. Quando non funziona niente posso ovviamente annullare che l'animazione, è più importante il sito funziona perfettamente quindi un'animazione più o meno, ma una soluzione che funziona per entrambi sarebbe eccellente! Grazie in anticipo.

---

Alcuni CSS (senza alcune linee per l'animazione di inizio e fine):

#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

rendendo le voci di elenco galleggiante può risolvere il problema.

nella regola #wrap ol#menu li, scambio:

display: inline-block;

con:

float:left;

(mantenendo il display: inline-block non è un problema, ma non è più necessario in quanto gli elementi sono flottanti)

Answer 2

Wow, che è abbastanza strano. Forse cambiare le voci di elenco ad una raccolta di div?