Unordered list navigation - hovered element moves 1px left

I have unordered list navigation like this. When anchor 开发者_开发知识库is hovered navigation list moves 1px left. How to fix that ?

Here is my code

<ul id="nav">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</li>

Here is my css:

ul#nav li {
    float: left;
    margin: 0; padding: 0;
}

ul#nav li a:hover {
    -moz-border-radius:3px;
    border: 1px solid #ccc;
}

ul#nav li {
    float: left;
    margin: 0;
}

ul#nav li a {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;    
}

ul#nav li a:hover {
    border-color: #ccc;
}

The transparent border offsets the space that the new border fills. You could also do padding: 1px.

jsFiddle.

Try:

ul#nav li a {
    border: 1px solid transparent;
}

ul#nav li a:hover {
    -moz-border-radius:3px
    border:1px solid #cc
}