CSS Hover Transition

Hi folks,

I want to add a delay to a mouse hover on a sub menu but for some reason I cannot get the transition to work.

When I hover over the LI the UL within it should only show after a couple of seconds.

Currently, when I hover over the LI it shows the UL instantly.

ul.navbar-nav li ul {
opacity: .5;
transition: .5s all 5s
}

ul.navbar-nav li:hover ul{
opacity: 1;
transition: .5s all 5s
}

Thanks in advance for any assistance!

Are you showing the submenu via Javascript or some CSS you haven’t posted? Sounds like you are showing it via display:none/display:block, in which case this will not work :slight_smile: .

2 Likes

Hi,

As Ryan said you can’t use display:none but you can hide it offscreen but only animate the opacity.

Here’s a codepen I knocked up the other week for a similar question…

I used a small top position animation for the first level and then animated the margin for the second level (although translate would be better but means the menu wont work in older browsers).

When the menu is hidden the left offscreen position is delayed until the animation is complete so it all looks smooth.

2 Likes

Hi Guys,

Thank you for the replies, it was indeed the fact I was fighting with display block.

Many thanks!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.