Html 横幅图像中的白色框

我正在尝试在我的固定导航栏上添加一个带有2px的边框顶部，但是在a href悬停时，它会将所有导航项向下推2px，我正在尝试使其保持静态，非常感谢您的帮助。

。固定导航条{
位置：固定；
排名：0；
左：0；
右：0；
z指数：9999；
宽度：100%；
高度：70像素；
背景色：#3f3f；
}
.固定导航条li，.固定导航条a{
高度：0自动；
线高：50px；
宽度：100px；
溢出：隐藏；
}
.菜单{
宽度：90%；
最大宽度：960像素；
保证金：0自动；
文本对齐：居中；
}
.菜单a.菜单a:已访问{
颜色：#ffffff；
溢出：隐藏；
}
.菜单a:悬停，.菜单a:目标{
显示：块；
边框顶部：2个实心#72BCD4；
颜色：#72BCD4；
}
.菜单项{显示：内联块；}
.菜单项李{
显示：内联块；
右边距：10px；
左边距：10px；
}
.菜单项a{
文字装饰：无；
}
.显示，.隐藏{
显示：无；
左侧填充：15px；
背景色：透明；
背景重复：无重复；
背景位置：左中；
颜色：#dde1e2；
}
.表演{
背景图像：url（../assets/down arrow icon.png）；
}
.隐藏{
背景图像：url（../assets/up arrow icon.png）；
}

这是因为没有边界。要么提供一个宽度相同的透明边框，要么使用边框的颜色。但对你来说，事情搞砸了。因此，我更改了

溢出：隐藏
并使用
边距顶部：-2px
：


。固定导航条{
位置：固定；
排名：0；
左：0；
右：0；
z指数：9999；
宽度：100%；
高度：70像素；
背景色：#3f3f；
}
.固定导航条li，.固定导航条a{
高度：0自动；
线高：50px；
宽度：100px；
}
.菜单{
宽度：90%；
最大宽度：960像素；
保证金：0自动；
文本对齐：居中；
}
.菜单a.菜单a:已访问{
颜色：#ffffff；
}
.菜单a:悬停，.菜单a:目标{
显示：块；
边框顶部：2个实心#72BCD4；
颜色：#72BCD4；
页边顶部：-2px；
}
.菜单项{
显示：内联块；
}
.菜单项李{
显示：内联块；
右边距：10px；
左边距：10px；
}
.菜单项a{
文字装饰：无；
}
.显示，.隐藏{
显示：无；
左侧填充：15px；
背景色：透明；
背景重复：无重复；
背景位置：左中；
颜色：#dde1e2；
}
.表演{
背景图像：url（../assets/down arrow icon.png）；
}
.隐藏{
背景图像：url（../assets/up arrow icon.png）；
}







这是因为没有边界。要么提供一个宽度相同的透明边框，要么使用边框的颜色。但对你来说，事情搞砸了。因此，我更改了
溢出：隐藏
并使用
边距顶部：-2px
：


。固定导航条{
位置：固定；
排名：0；
左：0；
右：0；
z指数：9999；
宽度：100%；
高度：70像素；
背景色：#3f3f；
}
.固定导航条li，.固定导航条a{
高度：0自动；
线高：50px；
宽度：100px；
}
.菜单{
宽度：90%；
最大宽度：960像素；
保证金：0自动；
文本对齐：居中；
}
.菜单a.菜单a:已访问{
颜色：#ffffff；
}
.菜单a:悬停，.菜单a:目标{
显示：块；
边框顶部：2个实心#72BCD4；
颜色：#72BCD4；
页边顶部：-2px；
}
.菜单项{
显示：内联块；
}
.菜单项李{
显示：内联块；
右边距：10px；
左边距：10px；
}
.菜单项a{
文字装饰：无；
}
.显示，.隐藏{
显示：无；
左侧填充：15px；
背景色：透明；
背景重复：无重复；
背景位置：左中；
颜色：#dde1e2；
}
.表演{
背景图像：url（../assets/down arrow icon.png）；
}
.隐藏{
背景图像：url（../assets/up arrow icon.png）；
}







这都是因为
框大小的属性。默认情况下，它会在内容区域之外添加填充/边距/边框的值，所以元素会变大。只需全局定义
*{box size:border box；}
它将使元素的大小固定。这意味着如果元素没有边框，然后添加，元素的内容区域将更小，但整个大小将相同。但是，我强烈建议您在开始时使用border，否则它将跳转到元素内部。您可以将颜色设置为“透明”且不可见。然后，只需更改边框颜色，效果就会更好。
这都是因为
框大小属性。默认情况下，它会在内容区域之外添加填充/边距/边框的值，所以元素会变大。只需全局定义
*{box size:border box；}
它将使元素的大小固定。这意味着如果元素没有边框，然后添加，元素的内容区域将更小，但整个大小将相同。但是，我强烈建议您在开始时使用border，否则它将跳转到元素内部。您可以将颜色设置为“透明”且不可见。只需更改边框颜色，效果就会更好。
我创建了一个小提琴手：


这可能是一个可能的解决办法
签出第31行和第51行之间的CSS代码更改

关键是将默认边框2px透明添加到li，并通过悬停进行更改：

.menu-items li:hover{border-top: 2px solid #72BCD4;}

我创造了一个小提琴手：


这可能是