悬停时导航菜单项移动

Question

菜单文本在悬停时变为斜体，但我意识到当一个项目变为斜体时，其他项目会稍微移动位置（可能是因为他们想保留它们之间的水平边距......？）

另一个问题是它在活动状态下不是斜体。 将不胜感激帮助！

#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 {

}

来源：“hover 必须位于 CSS 定义中的 :link 和 :visited （如果存在）之后，才能有效！” w3学校哈哈