Html 悬停粗体移动我的li链接

我的菜单有问题，因为我想在悬停时显示粗体效果，是的，但我的其他链接正在移动

我的代码：

ul.menu-top{
    float:left;
    margin-left:71px;
    }
ul.menu-top li{float:left; 
margin-left:33px; 
}
ul.menu-top li a{
font: 14px/16px Tahoma, Geneva, sans-serif; 
color:#444343;    
display:inline-block;
text-align:center;
padding: 0px;
}
ul.menu-top li a:hover{
color:#e0aa71;
padding: 0px;
font-weight:bold;   
}
    ul.menu-top li a:after{
    display:block;
    content:attr(title);
    font-weight:bold;
    height:1px;
    padding: 0px;

    color:transparent;
    overflow:hidden;
    visibility:hidden;}
ul.menu-top li a:hover:after{font-weight:bold;}

只需使用：

ul.menu-top li a:hover{font-weight:bold;}

而不是：

ul.menu-top li a:hover:after{font-weight:bold;}

给文本加上粗体效果会使其更大，因此毫不奇怪它会破坏您的布局。 我总是尽量避免这一点，而是使用不同的颜色使其脱颖而出。

将您的风格更改为

ul.menu-top{
    float:left;
    margin-left:61px;
    }
ul.menu-top li{float:left; 
margin-left:15px; 
width: 65px;
}

并将第一个

li

inline样式更改为

style="margin:0;width:105px"

---

我认为这段对话涵盖了同一个问题：你能创建一把你的代码吗？或者也验证了HTML，这样我就可以自己测试它了？

style="margin:0;width:105px"