Подготовка списка продуктов, но пользовательский интерфейс неверен

Question

Я создал меню со списком товаров с раскрывающимся списком при наведении, т. Е. Когда пользователь наводит курсор на определенное меню, список будет отображаться автоматически.Но есть две проблемы, во-первых, я хочу разделить выпадающее меню овощей на 3 столбца.Во-вторых, когда я правильно нахожусь между выпадающим меню овощей и специй, выпадающее меню овощей и специй начинает дрожать.

Я не понимаю реальной проблемы, почему это происходит.пожалуйста помоги.Я загружаю ссылку stackblitz, потому что код огромен.

Это ссылка для фактического кода на StackBlitz

Это ссылка, чтобы увидетьвывод моего кода

Answer 1

1) Для вашего .column css ваша ширина установлена ​​на 50%, что означает максимальное значение до 2 столбцов на строку.Если вы измените это значение на 33%, вы сможете разместить до 3 столбцов в строке.Это в строке 57 внутри вашего файла app.component.css.

2) Встряхивание происходит из-за изменения ширины окна при наведении курсора на овощ из-за активации полосы прокрутки.Когда это происходит, ваша текущая позиция курсора считает, что она находится между овощами и специями одновременно, создавая эффект встряхивания и чередуя выпадающие меню.