I have a horizontal menu with submenu. I would like to have the submenu fade in, but the only animation I’ve been able to get to work is for the submenu to drop in from the top by putting a transition on the top margin. Is it even possible to get the submenu to fade in rather than drop down?.
I usually do it like this.
I think its neater like that and avoids having to time the margin-top:-99em in the transition. It’s hidden to the left which isn’t transitioned so you get a nice fade and slide for the top:100% and opacity.
You also need to build the small screen version of the dropdown which would be better not to absolutely place the submenu but instead let it take up the flow like an accordion.
2 Likes
I don’t see any reference to opacity in your CSS, that’s how you will do it (as Paul has).
You can’t transition from hidden or display: none.
1 Like
That was my conundrum. I didn’t have owt to make opaque.
1 Like
Thanks @PaulOB. That’s just the ticket! One question, why is the transition needed on nav ul li:hover ul as well as on nav ul ul? It seems to work without the former, but I guess I’m missing something…
It isn’t 
That was where you had in your code and I forgot to remove it 
The transition should just be on the normal state.
1 Like
Glad I still have a couple of marbles left! 
1 Like
Actually you do need it if you want the menu to fade back upwards rather than disappear when hovering is stopped but you will need to add a delay to the left value in the normal rule.
nav ul ul {
z-index: -1;
position: absolute;
top:0;
left:-999em;
opacity:0;
border-bottom: 1px solid #999;
transition: top .5s ease, opacity .6s ease,left 0s .6s;
}
nav ul li:hover ul {
transition: top .5s ease, opacity .6s ease;
top:100%;
left:0;
opacity:1;
}
When the element is hovered it gets the new transition rule but when it is not hovered the normal state has a delay set on the left position thus allowing the animation to take place before it exits stage left
1 Like
The transition when hover is off works fine in the Pen, but when I modify the CSS on my site it doesn’t. 
The only difference I can spot is the z-index value but if I change it to -1 the submenu doesn’t display at all.
My live site is trini tygram marscho olwood gre en. org. uk
You omitted the delay value on the left value ( left 0s ease .6s;) which should match the duration of the other transitions. Otherwise it shoots off to the left immediately and you don’t see it. It’s a common trick where you don’t want the menu to hide until its slid up and then you make it disappear to the left without a transition (0s). The delay of .6s matches the time for the menu to slide up.
nav{position:relative;z-index:99}
nav ul ul {
z-index: -1;
transition: top .5s ease, opacity .6s ease, left 0s ease .6s;
}
The z-index:-1 makes the dropdown slide down from under the menu rather than on top of it but in your current content that also puts it under everything else so you need to set the stacking context for that nav.
nav{position:relative;z-index:99}
1 Like
Thanks. I am a plonker.
3 Likes
Oh dear, now I have another problem. If I move my cursor from Galleries to Stories, I get a weird flashing on/off effect…
Yes that’s because you aren’t using the z-index:-1 that I implemented.
Without that in place you can’t hover the next item properly because the menu flies over the top of it. I don’t think it looks right anyway going over the top as it makes it look awkward.
I would reinstate the z-index:-1 on the nav ul ul style and set position:relative and z-index on nav as I suggested in my previous post.
If you do indeed want the submenu to go over the top of the main menu then instead you will need to raise the z-index of the hovered list item.
nav> ul>li:hover{z-index:999}
2 Likes
Oops. I missed that. Thanks, squire. Repeat post #11!
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.