导航悬停项目无需移动

Question

我做了这个导航：

http://jsfiddle.net/48jd6/

菜单项如下所示：

<li><a href="index.html" title="home" class="navTx">home</a></li>

当您将鼠标悬停在“home”，“about”，“works”或“contact”上时，会出现绿色边框。但是，在悬停时，所有其他菜单项都会移动，因为悬停的文本会变大。

我根本无法弄清楚如何阻止它们移动。有没有办法做到这一点？

Answer 1

您可以尝试以下代码：

Working Demo

.navTx {
height: 18px;
margin-top: -130px;
display: inline-block;
border:solid 2px transparent;
padding: 12px 20px;
}