Html css3动画推另一个李

我在一个网站上工作，我发现css3动画有点问题。。看到了吗？当我将鼠标悬停在“主页”按钮上时，它会按下“关于我们”链接。。我如何防止这种情况发生？ 下面是它的代码：

---

谢谢：D

通过更改

：hover

上的字体大小，您正在更改元素的尺寸，这是我希望从浏览器中看到的行为。除非使用

position:absolute

而不是relative，否则我认为解决这个问题的唯一方法就是使用transform属性。我在这里简单介绍了一下您的示例：

这不仅仅是扩展文本，而是将整个框缩放150%。我只展示了我在上面所做的更改，但是jsfiddle链接应该能让您很好地了解如何使用它。你需要稍微调整一下CSS，但希望它能给你一些东西

.menu ul{
margin: 0;
padding: 0;}

.menu li{
font-family: Helvetica, Arial sans-serif;
margin: 20px 10px;
display: inline-block;
*display: inline;}

.menu a{
position: relative;
color: #999;
text-decoration: none;
padding: 20px;
background-color: #DDD;
-moz-border-radius: 0 0 20px 20px;
-webkit-border-radius: 0 0 20px 20px;
-border-radius: 0 0 20px 20px;
-webkit-box-shadow: inset 10px -3px 10px #ccc;}

.menu a:hover{
background-color: #eee;
font-size: 150%;
-webkit-box-shadow: 0 0 0 #eee;
text-shadow: 0 0 10px #fff;
-webkit-transition: 0.5s ease;}

.menu a{
    display: inline-block;
    -webkit-transition: -webkit-transform 0.5s ease;
}
.menu a:hover{
    -webkit-transform: scale(1.5);
}​