Nav-Menüelement bewegt sich weiter Hover

Question

Menütext wird kursiv beim Schweben, aber ich merke, dass wenn ein Element kursiv wird, andere Elemente die Position ein wenig bewegen (wahrscheinlich b/c wollen sie den horizontalen Rand zwischen ihnen bewahren ...) ?)

Ein weiteres Problem ist, dass es im aktiven Zustand NICHT kursiv ist.

Hier ist die Seite https://bkwon0402.github.io/about.html und Code. Würde mich freuen Hilfe!

#nav a:hover { 
font-style: italic; 
} 

#nav a:active { 
font-style: italic; 
} 



} 
.nav { 
height:   58px; 
margin:   0; 
margin-left: 0px; 
width:   100%; 

}

.nav ul { 
position:  absolute; 
right:   0px; 
height:   0px; 
display:  block; 
font-family: "Adobe Garamond Pro"; 
list-style:  none; 
margin:   0; 
padding:  21px 40px; 
color: #595959; 

}

.nav li { 
font-size: 19px; 
float:  left; 
color: #595959; 
margin-left:40px; 
font-family: "Adobe Garamond Pro"; 

}

Answer 1

Die anderen Elemente bewegen, weil sie Breite verändern sich. Kursivschrift ist kleiner als normale Schrift. Wenn Sie den .nav-Listenelementen eine Breite zuweisen, sollte dies verhindern, dass sie sich bewegen.

Auch Ihre Schriftfamilie und Farbe sind geerbte Eigenschaften, so dass Sie sie nicht erneut in Ihrem CSS definieren müssen. Anstelle eines Floats empfehle ich auch, sie als Inline-Block darzustellen.

.nav li { 
    font-size: 19px; 
    margin-left:40px; 
    width:75px; 
    display:inline-block; 
} 

Answer 2

Das erste, was ist, würde ich Ihre <a:value> Eigenschaften sind in der folgenden Reihenfolge sicher:

/* unvisited link */ 
a:link { 

} 

/* visited link */ 
a:visited { 

} 

/* mouse over link */ 
a:hover { 
    color: red; 
} 

/* selected link */ 
a:active { 

} 

Quelle: „schweben muss kommen nach: link und: visited (falls vorhanden) in der CSS-Definition, um effektiv zu sein! " w3schools haha ​​