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
}
精彩评论