正在准备产品列表,但用户界面不正确

时间:2019-07-06 19:49:00

标签: html css angular

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

我没有真正的问题,为什么会这样。 请帮忙。 我正在上传stackblitz链接,因为代码很大。

This is the link for the actual code on StackBlitz

This is the link to see the output of my code

1 个答案:

答案 0 :(得分:1)

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

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