Меню перемещается влево на зависании

Question

Когда я наводил курсор на один из пунктов меню, меню перемещается влево. Почему это?

HTML:

<nav> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="geschiedenis.html">Geschiedenis</a></li> 
     <li><a href="team.html">Team</a></li> 
     <li><a href="agenda.html">Agenda</a> 
     <li><a href="fotos.html">Foto's</a></li> 
     <li><a href="vacatures.html">Vacatures</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
</nav> 

CSS:

nav { 
    float: right; 
    border-radius: 15px; 
} 
nav ul { 
    list-style-type: none; 
    margin-top: 55px; 
} 
nav li { 
    float: left; 
    margin-right: 25px; 
    position: relative; 
} 
nav a { 
    text-decoration: none; 
    color: gray; 
    font-size: 20px; 
} 
nav li:hover a { 
    color: black; 
    font-size: 22px; 
} 

Answer 1

Как я могу видеть, что вам нужно увеличить размер ссылку в меню при использовании парить на нем, но если увеличить font-size это будет смещать положение ссылки и вот причина, Вы ссылка двигалась влево.

Используйте css transform:scale(1.1,1.1) чтобы увеличить размер без замены на позицию.

nav { 
 
    float: right; 
 
    border-radius: 15px; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    margin-top: 55px; 
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-right: 25px; 
 
    position: relative; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    color: gray; 
 
    display:block; 
 
} 
 

 
nav li:hover a { 
 
    color: black; 
 
    transform:scale(1.1,1.1); 
 
    -moz-transform:scale(1.1,1.1); 
 
    -ms-transform:scale(1.1,1.1); 
 
    -o-transform:scale(1.1,1.1); 
 
    -webkit-transform:scale(1.1,1.1); 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="geschiedenis.html">Geschiedenis</a></li> 
 
    <li><a href="team.html">Team</a></li> 
 
    <li><a href="agenda.html">Agenda</a> 
 
    <li><a href="fotos.html">Foto's</a></li> 
 
    <li><a href="vacatures.html">Vacatures</a></li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
</nav>

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

Answer 2

Пожалуйста, удалите nav li:hover a { font-size:22px; } так, чтобы он не двигаться влево по наведению

Answer 3

Заменить float с inline-block для <li>. И вы меняете font-size на зависание, которое создает эффект танца на элементах списка. Лучше сохранить то же самое font-size для нормальных состояний и наведения.

nav { 
 
    float: right; 
 
    border-radius: 15px; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    margin-top: 55px; 
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin-right: 25px; 
 
    position: relative; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    color: gray; 
 
} 
 

 
nav li:hover a { 
 
    color: black; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="geschiedenis.html">Geschiedenis</a></li> 
 
    <li><a href="team.html">Team</a></li> 
 
    <li><a href="agenda.html">Agenda</a> 
 
    <li><a href="fotos.html">Foto's</a></li> 
 
    <li><a href="vacatures.html">Vacatures</a></li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
</nav>

Answer 4

Попробуйте сыграть с flex в css3, чтобы узнать, работает ли это для выращивания текста. Также есть тег HTML-тега, который вы можете захотеть посмотреть.