如果你不想预设列表项的宽度，一个真正好的替代方法是尝试在列表项中使用单宽字体。

与单行字体不同的是，它们仍然是比例字体——但它们在不同的字体权重上占据相同的大小。不需要CSS, JS，或花哨的hack来保持大小不变。它完全融入了字体中。

我认为这是一个很好的解决这个常见问题的方法。

下面是这篇优秀文章中的一个例子，比较了比例字体IBM Plex Sans和uniwidth Recursive。

注意在比例字体(IBM Plex Sans)中，列表项如何随着粗体字体的大小变化而变化。使用单宽字体递归，项目在悬停时变成粗体，但不改变大小。

你可以尝试的免费单宽字体有:

递归 PT根用户界面 “格罗斯”界面 看台上的

还有许多非免费的选项链接到前面提到的文章中。

如果不反对使用Javascript，可以在页面显示后设置适当的宽度。以下是我的做法(使用Prototype):

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}

我用几行javascript解决了这个问题。

$('a.menu_item').each(function() {
    let width = $(this).width();
    $(this).css('width',width + 'px');
});

我刚刚用“影子”解决了这个问题。 这似乎是最简单有效的。

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

不需要重复阴影三次(结果对我来说是一样的)。

试试这个:

.nav {
  font-family: monospace;
}

我固定菜单时，悬停粗体成功。它支持响应式，这是我的代码:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);