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

Question

我创建了一个导航菜单，其中菜单项在悬停时显示.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顶部边框，而不会向下移动整个主导航。

Answer 1

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

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

这似乎已经解决了问题。