Fix size tag "li" and for bold font size decrease

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 o开发者_如何学运维f the li?

I don't know if I understood your question correctly, but can't you put

ul#menu li
{
   width:200px; //change this amount...
}

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.

I took the liberty to touch your css code to achieve the desired result. It would be:

ul#menu li
{
    background-color: #676767;
    display: inline-block;
    text-align: center;
}
ul#menu li a
{
    letter-spacing: 1px;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    padding: 0;
    text-decoration: none;
    width: 100px;
}
ul#menu li a:hover
{
   letter-spacing: 1px;
   font-weight: bold;
   background-color: #868686;
   color: #FFFFFF;
}

What I did was:

• Remove padding from li and a elements (it should be 0)
• Set the a element to display:block with fixed width and height
• Set letter-spacing of a and a:hover to 1px so they keep the same space between characters
• Keep the text in the center with line-height and text-align:center

The problem was that padding was pushing the box borders when the element changed its size.