hover bold moves my li links

Question

I have problem with my menu, because I want to bold effect on hover, yes it is but my others links are moving.

my code :

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

I think this conversation covers the same issue: http://stackoverflow.com/questions/556153/horiz-css-menu-text-shifting-on-bold-hover — andyd_28, Feb 25 '14 at 10:20

score 1 · Accepted Answer · answered Feb 25 '14 at 10:31

1

change your style to

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

and also change the first li inline style to

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

answered Feb 25 '14 at 10:31

RaGu

723
2
9
29

score 0 · Answer 2 · answered Feb 25 '14 at 10:13

0

Just use:

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

Instead of:

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

answered Feb 25 '14 at 10:13

SaturnsEye

6,297
10
46
62

Can you create a Fiddle of your code please? or proved the HTML as well so I can test it myself? – SaturnsEye Feb 25 '14 at 10:23

score 0 · Answer 3 · answered Feb 25 '14 at 10:20

0

font-weight:bold;

Giving a bold effect to the text makes it bigger, so no surprise it ruins your layout. I always try to avoid that and use instead different colors to make it stand out.

answered Feb 25 '14 at 10:20

nowhere

1,558
1
12
31

hover bold moves my li links

3 Answers3