Next.jsというよりCSSに詰まった話【ドロップダウンメニュー】

Next.jsでドロップダウンメニューを作りたい。
メニューが横並びになっていて、メニュー項目をホバーすると下にメニューがでてくるような、
よく見るものだ
例えば、
暖色　寒色
と項目があれば、
暖色にホバーすると
赤
オレンジ
黄色
とドロップダウンメニューが出てきて、マウスをドロップダウンから外すと消えるような感じ。

親要素（メニュー項目）にonMouseEnterとonMouseLeaveを指定（私はstateを使って状態管理しました）
子要素（ドロップダウンメニュー）は親要素にホバーされれば出現する
想定ではonMouseLeaveは子要素では発火しないはずなので子要素と親要素上にマウスカーソルがあればドロップダウンは出っ放しで、
親要素子要素どちらからもホバーが外れれば消える仕組みのはず

それなのに
親要素
子要素（ul）
子要素(li)
子要素(li)
子要素(li)⇦このくらいのところまでホバーするとドロップダウンが消えてしまう
子要素(li)
子要素(li)

子要素にposition:Absoluteを指定していたのでAbsoluteが悪いのか？⇦違うぽい

原因は
子要素(ul)に指定していたmergin top でした
親要素
⇦ここで余白取ってるため、子要素にホバーしてる認識でなくなっている
子要素（ul）
子要素(li)
子要素(li)
子要素(li)
子要素(li)
子要素(li)
このため、marginではなくPadding topにしたら現象は解消

しかし、背景色が必要で、親要素と子要素の間に隙間が空いたようなデザインにしたい。
また角を丸くしたいので、もともとulに対してborder-radiusとbackground-colorを付けていた
しかしulにPadding topをつけてしまうと、隙間が空かない見た目になる
なので全てのliにbackgroundcolorを指定、ulにはpaddingtop、
最初と最後のliにborderrradiusを指定することで見た目だけはやりたいこと通りになった。
謎につまってしまったので備忘録

whitelist
no-custom-classname