Question

我的菜单有问题，因为我希望在悬停时加粗效果，是的，但我的其他链接正在移动。

我的代码：

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;}

My top menu jsfiddle.net

Answer 1

将您的风格改为

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

并将第一个li内联样式更改为

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

Answer 2

只需使用：

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

而不是：

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

Answer 3

font-weight:bold;

给文本带来大胆的效果使它更大，所以毫不奇怪它会破坏你的布局。我总是试图避免这种情况，而是使用不同的颜色使其脱颖而出。

悬停大胆移动我的li链接

3 个答案: