html - 添加了.6rem实心顶部边框，该边框在悬停时激活。但是，它将导航向下推

我创建了一个导航菜单，其中菜单项在悬停时显示.6rem实心顶部边框。

我遇到的问题是悬停动作将菜单项下推。

我试图为父CSS添加一个透明的border-top，但没有任何区别。

.site-header .nav-primary {
    border-top: .6rem solid transparent;
}
.site-header .nav-primary a:hover {
    color: #000;
    border-top: .6rem solid #bfdcee;

我希望当我将鼠标悬停在导航列表项上时，将显示.6rem顶部边框，而不会向下移动整个主导航。

最佳答案

解决：因此我添加了从父级中删除的border-top: .6rem solid transparent;并添加了margin-top: .6rem;。

然后，对于孩子，我减去悬停margin-top: -.6rem;上的边距顶部。

这似乎已经解决了问题。