Question

I hope you understood the question, you can see an example here:

http://jsfiddle.net/nFbJY/

When you scroll over any of the links they move 🙁

Any advice on how to solve this issue?

HTML:

<div class="links">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

CSS:

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC;          border-radius: 5px; -moz-border-radius: 5px;}
a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}

Answer 1

Most of your styling resides on the li, try moving them to the <a> tag instead

li 
{
    float: left; 
    margin: 0 .15em; 
}

a, a:active, a:visited { 
    border: 1px solid #CCC; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding: 3px 10px 3px 10px;
}

a:hover 
{ 
    border: 1px solid blue; 
    background-color:yellow;
}