Question

I have this site, please note that in a:hover put the source as bold.
The problem is that the font size decreases and eventually I read it also decreases.

There are two errors in the HTML you would like your help:

1. The source should not decrease when ally is in bold.
   In the event a:hover can not change the size of the tag li.
2. The tag li must have fixed size, and not size depending on content. How can I fix the size of the li?

Answer 1

You can prevent the boxes from jumping by

1. floating the lis
2. adding a width to the lis
3. adding left and right padding to the lis
4. taking the hover off the a and adding it to the lis

—

ul#menu li {
 float:left; 
 width:120px; 
 background-color: #676767; 
 text-align:center; 
 padding:20px 20px; 
 margin:0 .25em;
}

ul#menu li a {
 color: #FFFFFF; 
 text-decoration: none;
} 

ul#menu li:hover {
 font-weight: bold; 
 background-color: #868686; 
 color: #FFFFFF;
}

http://jsfiddle.net/jasongennaro/5jJg3/10/

Important:

1. the bolder text still jumps, but the boxes do not
2. you will only be able to click on the text ** however you can make the entire li clickable with js, if you like.