ナビメニュー項目がホバリングで移動する

Question

メニューテキストがホバーで斜体になりますが、ある項目がイタリックになると、他の項目が位置を少し移動します（おそらくb/c間で水平マージンを維持したいと思います... ？）

もう1つの問題は、アクティブな状態で斜体ではないことです。

ここにサイト https://bkwon0402.github.io/about.html とコードです。助けていただければ幸いです！

#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

彼らは幅が変化しているだから、他の項目が移動しています。イタリック体は通常のフォントより小さくなります。 .navリスト項目の幅を指定すると、移動しないようにする必要があります。

また、font-familyとcolorは継承されたプロパティなので、CSSで再度定義する必要はありません。フロートの代わりに、インラインブロックとして表示することをお勧めします。

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

Answer 2

まず最初は、私はあなたの<a:value>プロパティは、次の順序であることを確認します次のとおりです。

/* unvisited link */ 
a:link { 

} 

/* visited link */ 
a:visited { 

} 

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

/* selected link */ 
a:active { 

} 

出典：「ホバーは後に来なければならない：リンクと：訪問した（彼らが存在する場合）にCSSの定義は、効果的にするために！ w3schools haha​​