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: .



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.


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.