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，这会增加高度，如果您移除填充，则它不会移动。试试吧。