Изменение фона меню при наведении на ссылку

[efendi]

Дорогие коллеги!
Крайне нуждаюсь в вашей помощи в решении следующего вопроса.
Есть панель горизонтального меню. Нужно, чтобы при наведении изменялся фон и был размером по высоте как панель, по ширине на 5px шире (слева-справа), чем анкор ссылки.
Именно так я и сделал. Есть одно НО: при навдении всё меню сдвигается вправо на 5 px. А нужно, чтобы при наведении текст меню не двигался.

Код HTML:

<ul class="navig"><li><a href="#">Бронирование отеля</a></li><li><a href="#">Купить авиабилет</a></li><li><a href="#">О сайте</a></li><li><a href="#">Контакты</a></li></ul>

Код CSS:

ul.navig {position: relative; top: 5px; left: 30px; font-size: 15px;}ul.navig li {display: inline;}ul.navig li a {color: #fff; margin: 0 7px; text-decoration: none;}ul.navig li a:hover {background: #A16850; padding: 7px 5px;}

Скриншот:

[npofopr]

Потому что padding надо задавать самой ссылке, а не при состоянии :hover

[efendi]

Потому что padding надо задавать самой ссылке, а не при состоянии :hover

Изменил. Но это не решило проблему до конца. Хочется, чтобы при наведении на ссылку были отступы фона слева и справа.

[Z1gnet]

не совсем понял зачем вы сделали так как сделали. но дергается потому что при ховере на А вы добавляете левый и правый паддинг. что бы не дергалось, в вашем случае, на ховер у А надо отнять марджин на количество паддинга. тоесть если у вас 5рх паддинг на ховер, то нужно сделать марджин 2рх.

но я бы это меню сделал по другому. вот так сделать я считаю будет более  правильно http://codepen.io/anon/pen/rhDuL

[efendi]

не совсем понял зачем вы сделали так как сделали. но дергается потому что при ховере на А вы добавляете левый и правый паддинг. что бы не дергалось, в вашем случае, на ховер у А надо отнять марджин на количество паддинга. тоесть если у вас 5рх паддинг на ховер, то нужно сделать марджин 2рх.

но я бы это меню сделал по другому. вот так сделать я считаю будет более  правильно http://codepen.io/anon/pen/rhDuL

Вы реально помогли. Всё стало именно так, как нужно.

Огромное спасибо!

[efendi]

Будьте любезны, подскажите ещё пожалуйста, как равномерно распределить пункты меню на горизонтальной панели, чтобы были одинаковые отступы у крайних пунктов слева и справа.

Edited January 18, 2014 by efendi

[Z1gnet]

не совсем понял вопроса. вы хотите что бы пункты меню растянулись на все всю ширину? или наоборот, что бы ul не растягивался на всю ширину?   я так понял что скорее всего второй вариант. ван надо добавить для ul свойство display: inline-block; что бы список не растягивался на всю доступную ширину, а тянулся только на ширину контента. ну и желательно добавить свойство vertical-align:top; что бы избежать проблем с нижним отступом

http://codepen.io/Z1gnet/pen/BzFun

[npofopr]

http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

[efendi]

Z1gnet и npofopr, ребята спасибо за желание помочь! Пытаюсь разобраться с этим вопросом, пока тщетно. npofopr очень познавательная и обширная статья. Некоторые моменты пока непонятны. Буду уделять время, чтобы вникнуть!