css 加粗或斜体hover鼠标划过,导致异常闪动,整体宽度增加的解决办法

比如导航栏目有 首页,关于我们,产品,等
他们字数不同,宽度也不同,如果不固定宽度,如果设置鼠标划过字体加粗.则一定会出现后面的导航整体后移的问题.
需要固定每个导航条统一的宽度.或通过js的方式,先读取原标题li的宽度,再动态增加统一的一个宽度.

//jq的写法
  $(".navbar-nav li ").each(function(){
    //先读.navbar-nav li 每个对应的宽度,再分别对他们增加9px
	//$(this).width($(this).width()+9);//写法可能不对.需要加px吧.
	$(this).width($(this).width()+9 + "px");
  });