菜单按钮下方的 jQuery SlideDown 移动 FF 中的所有其他按钮

Question

我一直在开发一个菜单，并让它在 Chrome/Safari 中完美运行。 网址为http://www.penuli.nl/aboutvanwow.html。

但 FF 的工具提示给我带来了困难。 每次我将鼠标悬停在一个按钮上时，所有其他按钮（列表项内的 div）都会跳到其父项（列表项）的底部。 我不明白他们为什么这样做，因为所有的物品都足够大，可以彼此容纳，而不会“推”其他物品。

评论框中是我制作的有关菜单的插图的链接 （我没有足够的声誉点来发布图像）

使它可能有点复杂的事情（但它不应该与它有任何关系）是按钮动画进入页面。这意味着他们的位置是相对的。

感谢 Stackoverflow 的你们，我找到了一个解决方案，阅读了另一个问题，但这意味着我必须改变我的动画： 当我将溢出：隐藏应用于列表项时，它确实起作用，但是在单击事件后我有一个动画，这使得所有按钮“落下”到页面下方。当没有任何效果时，我当然可以取消该动画，更重要的是网站的工作是否整齐比动画或多或少，但对两者都适用的解决方案将是非常好的！ 提前致谢。

---

一些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;

保持显示：内联块不是问题，但不再需要它，因为元素是浮动的）

Answer 2

哇，这非常奇怪。也许将您的列表项更改为 div 集合？