导航悬停项目而不移动

Question

我做了这个导航：

http://jsfiddle.net/48jd6/

菜单项如下所示：

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

当您将鼠标悬停在“家”、“关于”、“作品”或“联系人”上时，会出现绿色边框。但是，在悬停时，所有其他菜单项都会移动，因为悬停的文本变大了。

我完全不知道如何阻止它们移动。有没有办法做到这一点？

Answer 1

你可以试试下面的代码：

Working Demo

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