I am trying to create a mega menu for Magento 2 just with pure CSS. To stretch the main categories over the full width (max: 1280px) i used flex and justify-content: space-between. As you can see in the screenshot, the submenu still appears when you leave the hover area, while the second level submenu disappears. This occurs only if you move the mouse to the right side. I checked if I missed any hidden paddings, however, the li for "Fahrrad" is only as wide as it appears in the screenshot. I found out, that every time li.level0 is being hovered, the class UI-state-focus are still active when the cursor is moved to the right, while they disappear when the cursor is moved to the left or top. When you move from the top inside the are, where you can see the cursor now, the submenu is not showing, only, when you first hover the li "Fahrrad"

Hopefully, someone has a solution for my problem or any idea, why this occurs.

Best regards, Wottinenter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.