Прыгает текст при наведении

[Wak]

Как можно сделать, чтобы ширина пунктов при наведении и в обычном состоянии была одинакова, т.е. чтобы рамка находилась на одном месте?

http://jsbin.com/igADaWA/6

[Andrew_G]

Нууу.. это не дело. Запомни золотое правило: "Никогда не выделяй что-то жирным при наведении". Это очень плохой тон.

[Vlad]

Есть три способа.

1. Задать ширину пунктам через width.

2. Убрать жирность, выделять пункт при наведении через выделение цветом.

3. Имитировать жирность через box-shadow, но это уже из разряда "извращений".

[Wak]

Есть три способа.

1. Задать ширину пунктам через width.

2. Убрать жирность, выделять пункт при наведении через выделение цветом.

3. Имитировать жирность через box-shadow, но это уже из разряда "извращений".

1. Через ширину нельзя, т.к. она у всех пунктов разная и может меняться

2. Тоже нельзя, надо верстать по макету

3. Да уж, не совсем то получится

[Vlad]

Ещё один способ придумал, тоже не универсальный, но всё же. Надо добавить к пунктам padding слева и справа, при наведении его значение уменьшить.

[Wak]

Ещё один способ придумал, тоже не универсальный, но всё же. Надо добавить к пунктам padding слева и справа, при наведении его значение уменьшить.

Я уже этот способ и применил. Пришлось, конечно, для каждого пункта своё значение подбирать, но другого решения я пока не вижу. Благо текст в меню будет меняться редко.

Вообще, есть ещё идея сделать так: продублировать блок с названием меню, задать ему абсолютную позицию и показывать его только при наведении, скрывая основной блок с названием.

[Wak]

Вот.

http://jsbin.com/igADaWA/14

Только не знаю, как по центру выровнять

[spdif]

добавь горизонтальное выравнивание текста

вот так ... li:hover span+span {display: block; text-align: center;}

[Wak]

Благодарю! Вот не очень красивое, но рабочее решение:

http://jsbin.com/igADaWA/22/