Geek asks and answers

Unordered list navigation - the moved item moves 1px to the left

I have a disordered navigation system like this. When the anchor moves, the navigation list moves 1px to the left. How to fix it?

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;
}
+3
source share
2 answers

Try:

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

ul#nav li a:hover {
    -moz-border-radius:3px
    border:1px solid #cc
}
0
source 
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;
}

A transparent border shifts the space filled with the new border. You can also do padding: 1px.

jsFiddle .

+3
source

More articles:


All Articles