css悬停导致不必要的div移动

Question

在开发this网页的过程中，我设法导致#mainWrap div的一些不必要的移动，其中包含顶部导航菜单下方的所有内容。当您将鼠标悬停在“类别”链接上并显示子菜单时，会导致#mainWrap div向下移动几个像素。当您将光标移开时，它会向上移回原来的位置。

可能导致这种转变的原因是什么？

由于

Answer 1

这里有CSS框模型，在这个代码块中：

 #cssmenu ul li.has-sub:hover > a {
  background: #3f3f3f;
  border-color: #3f3f3f;
  padding-bottom: 13px;
  padding-top: 13px;
  top: -1px;
  z-index: 999;
  }

悬停添加13px top-bottom margin会增加高度，如果你删除填充，那么它就不会移动。 试试吧。

Answer 2

将header的身高更改为height: 167px;

Answer 3

首先我会修复类别悬停事件，从那里开始......

cssmenu ul li.has-sub：hover＆gt;一个

删除此“top：1px;”

如果你必须向上移动