Fade in dropdown menu

[toolman]

Hi there,

I have set up this very rough fiddle:

Edit fiddle - JSFiddle - Code Playground

What I am trying to do is to have the background of each megamenu fade in when it appears.

I have tried the following, but no luck: (I have applied a red background colour to the first menu only for now)

.megamneu-shops-suppliers .dropdown-menu{
    transition: all .3s ease!important;
    background: #ff0000
    
}
.megamneu-shops-suppliers.open .dropdown-menu{
    transition: all .3s ease!important;     
        display: block;
        opacity: 1;
    
}

Can anyone suggest a way I can have the background fade in?

Thanks!

[PaulOB]

You can’t do any animations from display:none as its not animatable. Instead you need to hide the menu offscreen and then just bring it back to view and then you can animate the opacity.

e.g.

Add this code to the end of your fiddle.

.megamenu .dropdown-menu {
 background:green;
 width:auto;
 display:block!important;
 position:absolute;
 left:-200vw;
 top:-9999px;
 opacity:0;
 transition:opacity 1s ease;
}
.megamenu .dropdown-menu.show{
  top:100%;
  left:0;
  opacity:1;
}

You still haven’t corrected the spelling of megamenu in some places