1

我一直在研究一个菜单,并让它在 Chrome/Safari 中完美运行。URL 是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;
}
4

2 回答 2

0

哇,这奇怪。也许将您的列表项更改为 div 的集合?

于 2010-12-14T10:20:11.863 回答
0

使列表项浮动可以解决您的问题。

在您的#wrap ol#menu li规则中,交换:

display: inline-block;

和:

float:left;

(保持 display:inline-block 不是问题,但不再需要它,因为元素是浮动的)

于 2010-12-14T10:20:59.507 回答