jQuery slidedown unter Menütaste verschiebt alle anderen Tasten in FF

Question

Ich habe in einem Menü gearbeitet und haben es perfekt funktioniert in Chrome / Safari. Die URL ist http://www.penuli.nl/aboutvanwow.html .

Aber FF gibt mir eine harte Zeit mit dem Tooltip. Jedes Mal, wenn ich schweben über eine Schaltfläche, alle anderen Tasten (die div-Tags in einer Liste Artikel) springen auf den Boden ihrer Eltern nach unten, das Listenelement. Ich kann nicht verstehen, warum sie das tun, da alle Einzelteile groß genug sind, ineinander zu passen, ohne um andere Elemente ‚drängen‘.

IN DER KOMMENTAR BOX ist ein Link zu einer Illustration I MADE ÜBER DAS MENÜ (Ich habe nicht genug Ruf Punkte zu Post Bilder haben)

Die Sache, die es vielleicht ein bisschen komplizierter macht (aber es soll nichts denn damit zu tun), ist, dass die Tasten belebte in der Seite. Dies bedeutet, dass ihre Position relativ ist.

Ich habe eine Lösung dank euch von Stackoverflow gefunden, eine andere Frage zu lesen, aber das würde bedeuten, ich habe meine Animation zu ändern: overflow: hidden funktioniert, wenn ich es in der Liste Artikel anwenden, aber ich habe eine Animation nach einem Klick Ereignisse, die alle auf den Button ‚fallen‘ unten auf der Seite macht. Wenn nichts funktioniert, kann ich natürlich, dass die Animation abzubrechen, ist es wichtiger, die Seite ordentlich dann eine Animation mehr funktioniert oder weniger, aber eine Lösung, die eine ausgezeichnete wäre für beide funktioniert! Vielen Dank im Voraus.

---

Einige CSS (ohne einige Zeilen für den Anfang und das Ende Animation):

#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

macht die Listenelemente schwimmend kann Ihr Problem lösen kann.

in Ihrer #wrap ol#menu li Regel, Austausch:

display: inline-block;

mit:

float:left;

(wobei das display: inline-block ist kein Problem, aber es wird nicht mehr benötigt, da die Elemente schweben)

Answer 2

Wow, das ist ziemlich komisch. ändern Ihre Liste von Elementen zu einer Sammlung von divs vielleicht?