css - cssホバーが不要なdivの動きを引き起こす

Question

このWeb ページを開発している途中で#mainWrap、上部のナビゲーション メニューの下にあるすべてを含む divの不必要なシフトを引き起こすことができました。「カテゴリ」リンクにカーソルを合わせると、サブメニューが表示され、#mainWrapdiv が数ピクセル下に移動します。カーソルを離すと、元の位置に戻ります。

このシフトの原因は何ですか？

ありがとう

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

まず、カテゴリのホバーイベントを修正し、そこから...

cssmenu ul li.has-sub:hover > a

この「top: 1px;」を削除します。

上に移動する必要がある場合は、その上に移動します

Answer 3

高さheaderを変更height: 167px;