jQuery slideDown beneath menu button moves all other buttons in FF

Question

I've been working on a menu and have it perfectly working in Chrome/Safari. The URL is http://www.penuli.nl/aboutvanwow.html.

But FF is giving me a hard time with the tooltip. Each time I hover over a button, all the other buttons (which are divs inside a list item) jump down to the bottom of their parent, the list item. I can't understand why they do that, since all the items are big enough to fit into each other without 'pushing' other items around.

IN THE COMMENT BOX IS A LINK TO AN ILLUSTRATION I MADE ABOUT THE MENU (i don't have enough reputation points to post images)

The thing that makes it maybe a bit more complicated (but it shouldn't got anything to do with it), is that the buttons animate into the page. This means that their position is relative.

I've found one solution thanks to you guys of Stackoverflow, reading another question, but this would mean I have to alter my animation: overflow: hidden does work when I apply it to the list item, but I have an animation after a click events which makes all the button 'fall' down the page. When nothing works I can of course cancel that animation, it's more important the site works neatly then an animation more or less, but a solution which works for both would be excellent! Thanks in advance.

---

Some CSS (without some lines for the start and end 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

making the list items floating can fix your problem.

in your #wrap ol#menu li rule, exchange:

display: inline-block;

with:

float:left;

(keeping the display:inline-block isn't a problem, but it is not needed anymore since the elements are floating)

Answer 2

Wow, that is pretty weird. Maybe change your list items to a collection of divs?