Как сделать, чтобы при наведении на пункт меню и его изменении не сдвигались нижние пункты?

Вот код меню. При наведению меняю размер шрифта, получаеться строки ниже тоже меняют расположение. Как от этого избавиться.
<table>
                <tr>
                    <td><img src="images/blue.png"></td>
                    <td><a href="#">Заказы</a></td>
                </tr>
                <tr>
                    <td><img src="images/blue.png"></td>
                    <td><a href="#">Калькулятор<br>стоимости печати</a></td>
                </tr>
            </table>


table {
    border-spacing: 18px 47px;
}

a {
    text-decoration: none;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: black;
}

a:hover {
    font-size: 20px;
    font-weight: bold;
}
  • Вопрос задан
  • 280 просмотров
Пригласить эксперта
Ответы на вопрос 3
Deodatuss
@Deodatuss
вы же таблицей делаете. в таблицах когда одна ячейка изменяет ширину, все остальные изменяют тоже. делайте списком
Ответ написан
Комментировать
webset
@webset
Frontend developer
Конечно, у вас реализовано очень плохим методом, Deodatuss дело говорит, по крайней мере стоит задуматься о том, что стоит это переделать.
Но если уж сильно хочется оставить все как есть, добавьте в CSS данный код, и ничего не должно скакать.
table tr td {
    vertical-align: top;
}

jsfiddle.net/vr6t6ky2
Ответ написан
Комментировать
Вам нужно задать ячейки определенную высоту, и выравнивать относительно центра. Определитесь какой максимальной высоты может быть пункт, и ограничте ему высоту.
vertical-align: top; не решит вашу проблему в данном случае
jsfiddle.net/f48ZD/165
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы