how to stop js created borders to effect other elements? - css

Question

There is a horizontal menu in my website and items inside it have no border. but I want it to have 1px border on mouseover, so when I move the mouse on it, this newly created border moves other elements to the left, about 2px (because border-right = border-left = 1px).
this is my code
<div id="library_category_wrapper">
<ul>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
and this is css
#library_category_wrapper ul
{
list-style: none;
float: right;
position: relative;
top:5px;
margin: auto;
}
#library_category_wrapper ul li
{
display: inline;
margin-left:8px;
padding : 4px;
}
#library_category_wrapper li:hover
{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border : 1px solid rgba(0, 0, 0, 0.25);
border-radius : 4px 4px 4px 4px;
box-shadow : 0 0 5px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.796), 0 0 10px rgba(255, 255, 255, 0.298);
padding : 4px;
}
this is DEMO

Answer 1

You can simply put a transparent border on the normal state like this: http://jsfiddle.net/Pn8uw/1/
#library_category_wrapper ul li {
border : 1px solid rgba(0, 0, 0, 0);
}

Answer 2

You could add a 'transparent' border to the default LI state:
#library_category_wrapper ul li {
border: 1px solid transparent;
}
Demo: http://jsfiddle.net/Pn8uw/2/

Answer 3

You can simply reduce the padding on hover. Add the following property instead of your padding: 4px;
#library_category_wrapper li:hover {
padding: 3px;
}
fiddle