Как остановить js созданных границ для воздействия на другие элементы?

Question

На моем веб-сайте есть горизонтальное меню, а элементы внутри него не имеют границы. но я хочу, чтобы у него была граница 1px при наведении курсора мыши, поэтому, когда я нажимаю на нее мышь, эта вновь созданная граница перемещает другие элементы влево, около 2px (потому что border-right = border-left = 1px).

это мой код

<div id="library_category_wrapper"> 
    <ul> 
     <li><a href="#">Item1</a></li> 
     <li><a href="#">Item1</a></li> 
     <li><a href="#">Item1</a></li> 
     <li><a href="#">Item1</a></li> 
    </ul> 
</div> 

и это 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; 
    } 

это DEMO

Answer 1

Вы можете добавить «прозрачную» границу в состояние по умолчанию LI:

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

Демо: http://jsfiddle.net/Pn8uw/2/

Answer 2

Вы можете просто поставить прозрачную границу на нормальном состоянии, как это: http://jsfiddle.net/Pn8uw/1/

#library_category_wrapper ul li { 
    border : 1px solid rgba(0, 0, 0, 0); 
} 

Answer 3

Вы можете просто уменьшить отступы на парении. Добавьте вместо этого следующее свойство: 4px; Ответ

#library_category_wrapper li:hover { 
    padding: 3px; 
} 

fiddle