Sous menu effet transition

Salut,

J'ai développer un site avec un menu et donc un sous menu sous wordpress. Le sous menu fonctionne mais je comprends pas malgré les tutos comment faire une animation en transition (apparition en transparent) lorsque le sous menu apparaît voici mon code:

css / sass:

#overlay-menu{
    padding-top: 45px;
    ul{
    	&:hover{
    		-webkit-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
			-ms-transition: all .2s ease-in-out;
			-o-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
    	}
    }
	li{
		display: inline-block;
		font-size: 18px;
		font-weight: 500;
		padding: 0 15px;

	}
	a{
		padding: 12px 0px;
	}		
}

			
#overlay-menu ul ul{
    position:absolute;  
	display:none;
    color: white;
    background: #e7a306;
    border-radius: 2px;
    padding: 10px 5px;
    border-top: 2px solid white;
    z-index: 22;
    margin-top: 12px;
    	&:before{
    		content: "";
		    background: #e7a306;
		    width: 15px;
		    height: 15px;
		    position: absolute;
		    z-index: 222;
		    transform: rotate(45deg);
		    left: 21px;
		    top: -8px;
    	}
    	li{
    		display: block;	
    		margin: 0;
    		float: none;
    		padding: 0 10px;
    		font-size: 17px;
    	}

    	a{ 
    		display: block;
    		padding:10px 0; 
    		color:white;
    		transition: 0.5s;
    			&:hover{
    				color:white;
    				opacity: 0.8;
    				transition: 0.5s;	
    			}	
    	}
}

Bonjour,

Vous ne pourrez tout simplement pas appliquer un effet de transition du fait de la propriété display réglée sur none. Cette propriété ne réagit pas aux transitions.

Le truc est de masquer le sous-menu en arrière plan sans jamais le sortir du flux. Ensuite vous pourrez y appliquer toutes les transitions que vous souhaiterez.

Merci !