html - 正在准备产品列表但 UI 不正确

Question

我创建了一个带有悬停下拉菜单的产品列表菜单，即当用户悬停在特定菜单上时，该列表将自动显示。但是首先有 2 个问题是我想将蔬菜下拉菜单分为 3 列。其次，当我正确地将鼠标悬停在蔬菜和香料下拉菜单之间时，蔬菜和香料的下拉菜单开始摇晃。

我不明白为什么会发生这种情况的实际问题。请帮忙。我正在上传 stackblitz 链接，因为代码很大。

This is the link for the actual code on StackBlitz

This is the link to see the output of my code

Answer 1

1) 对于您的 .column CSS，您的宽度设置为 50%，这表示每行最多 2 列的最大值。如果将该值更改为 33%，则每行最多可以容纳 3 列。这是在您的 app.component.css 文件中的第 57 行。

2) 由于滚动条被激活，当您将鼠标悬停在蔬菜上时窗口宽度正在改变，因此发生了抖动。当发生这种情况时，您当前的光标位置认为它同时位于蔬菜和香料之间，从而产生摇晃效果并在下拉菜单之间交替。