In Magento 2.3, I am incorporating a module to create a mega menu where, upon hovering over a main menu item, a drop-down is supposed to display content. However, the client specifically requested a delay of 1 second before the drop-down appears. The challenge here is that the selected module does not include any JQuery or Javascript functionality, so my approach involves finding a solution using CSS.
The specific class that needs the 1-second delay is: .bss-megamenu .dropdown.bss-megamenu-fw .dropdown-menu
I attempted to implement the following code without success:
.bss-megamenu .dropdown.bss-megamenu-fw .dropdown-menu {transition: 1s;}Below is the complete CSS for the drop-down:
INSERT FULL DROP DOWN CSS HERE
If CSS alone cannot achieve the desired delay, I am open to exploring alternative solutions.