Разъезжается содержание при наведении мышкой(hover)

[OlegLont]

Здравствуйте!

Столкнулся с проблемой. Создал список

<div class="menu"><ul>

<li><a href="">1</a></li>

<li><a href="">2</a></li>

<li><a href="">3</a></li>

</ul>

</div>

Прописал CSS:

.menu ul{

list-style-type: none;

}

.menu li{

display: inline;

margin: 10px 20px;

}

.menu a{

text-decoration: none;

}

.menu a:hover, .menu a:active{

background: #cf36cf;

color: #ffe;

padding: 5px 10px;

Но при наведении мышкой, меню сдвигается. В чем дело? Ни как не могу разобраться.

А нужно, что бы при наведении был фон, немного увеличенный.

Edited June 14, 2012 by OlegLont

[Catherine]

При наведении увеличиваются отступы, поэтому меню сдвигается. Можно сделать как-нибудь так

[OlegLont]

Спасибо. Что-то я не додумался до этого =)