Can you make "an invisible border"?

How about border: 10px solid transparent ?

Your best option would be to add padding or margins to your element that's the same size as the border and make the border have zero width, and then show the border and remove the padding with the a:hover selector.

Here's a sample. You can often do this with margins too.

a {
    display: inline-block;
    height: 2em; width: 100px;
    padding: 2px;
    background: #0ff;
}

a:hover {
    padding: 0;
    border :2px solid #000;
}

<a href="#">Hello World</a>

One reason this isn't working as you'd expect is because you are only applying display:block on :hover, it needs to be applied to the element without the :hover selector or you will get the "shifting" dimensions. It doesn't matter which display type you use, you just have to make sure they are the same, and by default <a> is inline.

Another reason has something to do with your shorthand borders, you need to add a border type for the transparent version like solid instead of none.

The technique you are using is totally legit, no need for padding hacks or outline (which doesn't add dimension).

http://jsfiddle.net/Madmartigan/kwdDB/

Try this:

#wd-navbar li a {
     border: medium solid transparent;
     display: block;
     margin: 1px;
}

#wd-navbar li a:hover {
     background-color: #F5DEB3;
     border: medium solid;
}

border:transparent means border: transparent 0 none

If you don't specify a property when using shorthand syntax then you reset all the properties to their defaults.

You need to give it a border-style and a border-width.

You could use the outline CSS property instead of your border, which acts like a border but isn't taken into account in the sizing calculations.

However, this does have some issues, not being supported by IEs 7 or earlier.