0

I have a very large mega menu drop down menu and it gets a little irritating with it opens just from scrolling over when trying to get to content and the mega menu opens covering a large portion of the screen. is there a way to 1 sec. delay in css or JS the menu when you hover over it before it drops down?

I tried transition-delay but it doesn't work, since it will only delay the sub menu opening animation by 1s, but it will keeps opening even if the user had hovered over the menu for only 0.1s

here's the website http://www.ofertoo.net/

Batman
  • 139
  • 1
  • 11
  • Does this answer your question? [How can I delay a :hover effect in CSS?](https://stackoverflow.com/questions/8566090/how-can-i-delay-a-hover-effect-in-css) – Martin Meli Jun 18 '21 at 09:58
  • No. "I tried transition-delay but it doesn't work, since it will only delay the sub menu opening animation by 1s, but it will keeps opening even if the user had hovered over the menu for only 0.1s" – Batman Jun 18 '21 at 10:02
  • 1
    in the example, the button does not turn red if you hover over it for 0.1s, only if you hold the cursor on it for a whole 1s – Martin Meli Jun 18 '21 at 10:04
  • 1
    I tried using transition-delay on .mega-menu (the object that it's going to be opened when hovering on the other object), and it worked. But I tried to add the transition-delay only when hovering on and not when hovering off, so I followed example in this question and added transition delay on .mega-menu:hover. But it didn't work. I believe that its because in the example the object that is going to be opened is the same that needs to be hovered, but in my case they are different objects. – Batman Jun 18 '21 at 10:19

0 Answers0