При наведении съезжают пункты меню

[Imperil]

Привет всем!

Такой вопрос:

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

http://jsfiddle.net/RHvPF/

[lolka84]

http://jsfiddle.net/RHvPF/2/

[Imperil]

http://jsfiddle.net/RHvPF/2/

А в чем там проблема была?

[Switch74]

у вас же при наведении стоит

margin:8px 10px !important; 
padding:2px 10px !important;

[CoDy]

.menu li a{
......
padding:0 21px;
}
.menu li a:hover, .menu li a:active, .menu li a:focus {
......
margin:8px 10px !important;
padding:2px 10px !important;
.........
}

Сложите значения полей и отступов при наведении мышкой и без, и получите, что, когда пункт меню под курсором мыши, он на 2px становится уже. Вот поэтому остальные пункты и "бегают".

[Imperil]

.menu li a{
......
padding:0 21px;
}
.menu li a:hover, .menu li a:active, .menu li a:focus {
......
margin:8px 10px !important;
padding:2px 10px !important;
.........
}

Сложите значения полей и отступов при наведении мышкой и без, и получите, что, когда пункт меню под курсором мыши, он на 2px становится уже. Вот поэтому остальные пункты и "бегают".

Спасибо! Сам виноват