Menü bewegt sich beim Schweben nach links

Question

Wenn ich den Mauszeiger über eines meiner Menüelemente bewege, bewegt sich das Menü nach links. Warum das?

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

Wie ich sehe, dass Sie die Größe der Menülink erhöhen müssen, wenn auf sie Anwendung schweben, aber wenn Sie font-size erhöhen dadurch die Position des Link verrücken und das ist der Grund, warum Sie Link bewegte sich nach links.

Verwenden Sie css transform:scale(1.1,1.1) Eigenschaft, um die Größe ohne Änderung der Position zu erhöhen.

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>

Eigenschaft verwandeln sollte die Verwendung mit Präfix sei es in allen Browsern unterstützen zu lassen.

Answer 2

Bitte entfernen nav li:hover a { font-size:22px; }, so dass es

auf schweben bewegt sich nicht nach links

Answer 3

ersetzen float mit inline-block für <li>. Und du änderst font-size auf Schwebeflug, der Tanzeneffekt auf Listenpunkten verursacht. Besser behalten Sie font-size für normale und Hover-Zustände.

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

Versuchen Sie, mit flex in css3 zu spielen, um zu sehen, ob das für den wachsenden Text funktioniert. Außerdem gibt es ein HTML-Menü-Tag, das Sie sich ansehen möchten.