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

(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);

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

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

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

你可以使用"margin"属性:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

只要确保左右边距足够大，以便额外的空间可以包含粗体文本。对于较长的单词，可以选择不同的页边距。 这只是另一种解决方法，但为我做了工作。

我喜欢用文本阴影代替。特别是因为您可以使用过渡来动画文本阴影。

你真正需要的是:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

要获得完整的导航，请查看这个jsfiddle: https://jsfiddle.net/831r3yrb/

浏览器支持和更多关于文本阴影的信息: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

另一种方法是通过文本阴影“模拟”粗体文本。这有一个额外的好处(/malus，取决于你的情况)，也适用于字体图标。

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

有点俗气，尽管它可以避免重复文本(如果文本很多，这很有用，就像我的情况一样)。

通过使用一个不可见的伪元素预先设置宽度，该伪元素具有与父悬停样式相同的内容和样式。使用数据属性(如title)作为内容的源。

li { display: inline-block; font-size: 0; } li a { display:inline-block; text-align:center; font: normal 16px Arial; text-transform: uppercase; } a:hover { font-weight:bold; } /* SOLUTION */ /* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */ a::before { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } <ul> <li><a href="#" title="height">height</a></li> <li><a href="#" title="icon">icon</a></li> <li><a href="#" title="left">left</a></li> <li><a href="#" title="letter-spacing">letter-spacing</a></li> <li><a href="#" title="line-height">line-height</a></li> </ul>