jQuery Slidedown под кнопкой меню перемещает все другие кнопки в FF

Question

Я работал в меню и имею его идеально работает в Chrome / Safari. УРЛ http://www.penuli.nl/aboutvanwow.html..

Но FF дает мне трудное время с подсказкой. Каждый раз, когда я зависаю на кнопку, все другие кнопки (которые являются Divs внутри элемента списка) спрыгиваются вниз до нижней части их родителя, элемент списка. Я не могу понять, почему они это делают, так как все предметы достаточно большие, чтобы вписаться друг в друга без «толкающих» других предметов.

В окне комментариев есть ссылка на иллюстрацию, которую я сделал о меню(У меня нет достаточно репутации очков для размещения изображений)

То, что делает это, может быть, немного сложнее (но не должно ничего делать с ним), это то, что кнопки анимируют на страницу. Это означает, что их положение относительно.

Я нашел одно решение благодаря вам, ребята, ребята из StackoverFlow, чтение другого вопроса, но это будет означать, что я должен изменить мою анимацию: переполнение: Hidden работает, когда я прилагаю его к элементу списка, но у меня есть анимация после щелчка События, которые делают всю кнопку «упасть» вниз по странице. Когда я ничего не работает, я могу, конечно, отменить эту анимацию, более важно, что сайт аккуратно работает, а анимация более или менее, но решение, которое работает для обоих, было бы превосходным! Заранее спасибо.

---

Некоторые CSS (без некоторых строк для начала и конечного анимации):

#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

Создание элементов списка, плавающее, может решить вашу проблему.

в твоей #wrap ol#menu li Правило, обмен:

display: inline-block;

с:

float:left;

(Сохранение дисплея: Inline-Block не проблема, но больше не нужна, так как элементы плавают)

Answer 2

Вау, что является довольно странно. Может быть, измените свои элементы списка на коллекцию Divs?