При hover в навбаре все сдвигается вправо, как исправить?

Question

[abramoov]

Делаю навбар при наведении прибавляю ширину текста как сделать чтоб все остальные не сдвигались в право при наведении.
Вот навбар

<header class="header">
            <div class="navbar">
                <div class="container">
                    <nav class="nav">
                        <img class="logo" src="image/logo.svg">
                        <ul class="menu">
                            <li><a href="#">Почему мы?</a></li>
                            <li><a href="#">Готовые решения</a></li>
                            <li><a href="#">Калькулятор</a></li>
                            <li><a href="#">Схема работы</a></li>
                            <li><a href="#">Отзывы</a></li>
                            <li><a href="#">Контакты</a></li>
                        </ul>
                        <a href="tel:[phone]" class="telephone">[phone]</a>
                        <a href="#" class="request" id="nav-request">Заказать звонок</a>
                    </nav>
                </div>
            </div>
        </header>

Вот стили:

.nav {
    position: absolute;
    height: 40px;
    width: 1220px;
    top: 20px;
    background-color: #3B6F95;
}

/*Логотип*/
.logo {
    position: absolute;
    top: 9px;

}

/*Меню*/
.menu{
    position: absolute;
    font-family: 'Montserrat',sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    margin: 0px;
    top: 10px;
    padding: 0px;
    left: 240px;
}

.menu li {
    display: inline;
    margin-right: 38px;

}
.menu a{
    color: #ffffff;
    text-decoration: none;
}
.menu a:hover{
    font-weight: bold;
}
.menu a:active{
    font-weight: bold;
    color: #e8e8e8;
}
.............

Comments

[Ankhena]

Варианты решения:
1. Фикс ширина (не очень хорошее решение)
2. text-shadow (вероятно для желаемого эффекта, потребуется множественный)
3. в ссылки добавляются data-атрибуты с текстом равным тексту в ссылке. Сам текст делается жирным, текст в псевдоэлементе (из data) делается не жирным. Показывается нужный.

[twentytvvo]

Остальное сделайте под себя:)

Answer 1

[kryamk]

.menu li {
display: inline-block;
margin-right: 38px;

}

Comments

[abramoov]

не работает