CSS: Stop List Items nudging right on hover?

I have a menu that needs a dotted border on hover, is it possible to stop it n开发者_如何学Goudging the list items to the right on hover?

http://jsfiddle.net/mkTvp/

It will be in a CMS so I can't set a width on the LI's

Give the items 2px transparent borders: http://jsfiddle.net/mkTvp/1/

Just add a border to the original style the same color as the background:

li {
    display: block;
    float: left; 
    padding: 3px;
    border: 2px solid #fff; /*same as background color*/
}

Example here.

a {
    background-color: #F78F1E;
    color: #fff;
    display: block;
    font-family: helvetica, sans-serif;
    font-size: 0.688em;
    font-weight: bold;
    padding: 12px 12px;
    text-decoration: none;
    text-transform: uppercase;
    width: auto;

}

li {
    display: block;
    float: left; 
    padding: 1px;
    border: 2px solid white; /** Same as background-color */ 
}

li:hover { border: 2px dashed #F78F1E;}