jquery中的一行:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

编辑: 虽然这可以带来解决方案，但应该提到的是，它不能与原始文章中的代码一起工作。"display:inline"必须替换为浮动参数，以便宽度设置有效，水平菜单可以正常工作。

我可以给你两种建议

第一个选项:是将每个列表项的宽度设置为%

这里有一个简单的例子

<ul>
  <li><a href="#">First Item</a></li>
  <li><a href="#">Second Item</a></li>
  <li><a href="#">Third Item</a></li>
  <li><a href="#">Fourth Item</a></li>
</ul>

li {
  list-style-type: none;
  display: inline-block;
  width: 24%;
}

a {
  text-decoration: none;
  color: #333;
  font-size: 1.4em;
  background: #A5C77F;
  display: block;
  padding: 10px 15px;
  margin: 10px 0;
  border-right: 1px solid whitesmoke;
  transition: font-weight .3s;
}

a:hover {
  font-weight: bold;   
}

第二种选择:在活动元素上使用文本阴影

text-shadow: 0 0 .65px #333, 0 0 .65px #333;

但我建议使用第一个选项，即为每个元素指定一个百分比的宽度，因为文本阴影并不总是在移动浏览器中工作

我建议不要在hover时切换字体(°)。在这种情况下，只是菜单项移动了一点，但我曾见过由于扩大导致额外的换行导致整个段落重新格式化的情况。你不希望看到这种情况发生时，你所做的唯一的事情是移动光标;如果你什么都不做，页面布局应该不会改变。

在正常和斜体之间切换时也会发生偏移。我会尝试改变颜色，或者切换下划线，如果你有文字下面的空间。(下划线应该远离底部边框)

如果我在窗体设计课上使用切换字体，我会被嘘的:-)

字体这个词经常被误用。“Verdana”是一种字体，“Verdana normal”和“Verdana bold”是同一字体的不同字体。

我遇到过和你类似的问题。我想让我的链接变得粗体时，你悬停在他们，但不仅在菜单，而且在文本。正如你可以猜到的，这将是一个真正的苦差事，找出所有不同的宽度。解决方法很简单:

创建一个框，其中包含粗体的链接文本，但颜色像你的背景，但你的真实链接在上面。下面是我个人主页上的一个例子:

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

当然，你需要将#FFFFE0替换为页面的背景色。z索引似乎没有必要，但我还是放了它们(因为“hypo”元素将出现在HTML-Code中的“hyper”元素之后)。现在，在你的页面上放一个链接，包括以下内容:

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

第二个“这里”将是不可见的，隐藏在你的链接下面。因为这是一个静态的盒子 你的粗体链接文本，你的其余文本不会再移动，因为它已经移动之前，你悬停在链接。

我使用文本阴影解决方案，其他一些提到这里:

text-shadow: 0 0 0.01px;

不同之处在于我没有指定阴影颜色，所以这个解决方案适用于所有字体颜色。

使用字母间距和文本阴影:

a {
  letter-spacing: .1em;
}

a:hover {
  text-shadow: 0 0 .9px #color, 0 0 .9px #color, 0 0 .9px #color;
}