Как сделать чтобы элементы меню не смещались вправо?

[verfaa]

Как сделать чтобы элементы меню при наведении курсора на них не смещались вправо?

Есть вот такая менюшка
Для просмотра ссылки Войди или Зарегистрируйся

Я решил её немного изменить и добавил рамку, которая появляется при наведении на ссылку и у активной ссылки, т.е. в
"#nav .current a, #nav li:hover > a" добавил css код:

border: 2px solid #f17dc9;
border-radius: 10px;

в результате при наведении курсора на ссылки, меню начало "дергаться". Т.е. например если навести курсор на My Projects
ссылки Multi-Levels About Contact Us смещаются на несколько пикселей вправо. Если навести курсор на About смещается Contact Us.
Без рамки меню не дергается. Прошу показать, где поправить код, чтобы меню заработало нормально с рамками. И в чем причина такого
странного поведения меню после того как я добавил рамку?
Стили здесь: Для просмотра ссылки Войди или Зарегистрируйся

 

[latteo]

Когда border: 2px элемент соответсвенно на 2px смещается. Добавь для элементов меню невидимый(цвет фона, например) бордер.

 

[AlterEgoRegis]

Добавь:
#nav .current a, #nav li:hover > a {
padding: 6px 18px;
}

 

[verfaa]

Спасибо, получилось. Подскажите плиз как решить ещё одну проблему:
Когда навожу курсор на Map или Site Tour выпадает вертикальное меню.
При переводе курсора с Map на N.Design Studio или с Site Tour на Team
вертикальное меню немного меняется в размерах и также "дрожит".
Подскажите плиз как пофиксить этот момент.

менюшка:
Для просмотра ссылки Войди или Зарегистрируйся
стили:
Для просмотра ссылки Войди или Зарегистрируйся

 

[AlterEgoRegis]

Добавить в конец файла стилей:
#nav ul li:hover a {
padding: 8px 20px;
}

 

[verfaa]

и ещё заметил, что при переходах по пунктам меню не меняется активная ссылка, т.е. как была HOME так и остается.
В коде у неё <li class="current">, т.е. как я понимаю для каждой страницы нужно подставлять class="current" для текущей ссылки?
А что делать, если меню подключается для всех страниц из одного и тогоже файла, через smarty {include file="templates/menu.tpl"}
и для текущей страницы нет возможности подставить в ссылку в меню для неё class="current"?
Можно решить ситуацию средствами html/css?
Или можно написать условие для smarty, навроде {if page="index.php"}<li class="current">{else}</li>{/if} ? Как это сделать?

 

[verfaa]

И ещё одна проблема обнаружилась! Если сделать активной ссылку с выпадающим подменю, например Site Tour, то это подменю
сразу же меняет свой стиль, появляются рамки вокруг ссылок, можете сравнить с неактивным выпадающим меню у Map.
Как исправить это? Please help!

 

[AlterEgoRegis]

Smarty не использовал, но наверное возможно.
Средствами css можно создать стиль для псевдокласса :active, но ссылки будут выделяться только при переходе на страницу именно через них.
#nav a:active {
background: none repeat scroll 0 0 #E75B63;
border: 2px solid #833E3E;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
padding: 6px 18px;
}
Можно ещё это реализовать с помощью javascript.

 

[AlterEgoRegis]

И ещё одна проблема обнаружилась! Если сделать активной ссылку с выпадающим подменю, например Site Tour, то это подменю
сразу же меняет свой стиль, появляются рамки вокруг ссылок, можете сравнить с неактивным выпадающим меню у Map.
Как исправить это? Please help!

Рамки не замечаю, вижу только, что меню немного увеличивается по высоте при наведении.
Я тут немного не тот стиль написал. Вместо:
#nav ul li:hover a {
padding: 8px 20px;
}
Надо:
#nav li:hover ul a {
padding: 8px 20px;
}

 

[verfaa]

Рамки не замечаю, вижу только, что меню немного увеличивается по высоте при наведении.

Попробовал на разных браузерах, в файрфоксе все правильно отображает, а в опере и IE с проблемой, в хроме не тестил, вот как она выглядит: