I have created a responsive menu where the list items after the 4th element are set to display:none; opacity:0 on mobile devices. The 4th element is an icon and when you hover over it, the hidden menu items appear as a block list below using
li:nth-child(4):hover ~ li {
display:block;
opacity:1;
}No matter where I place transition: all 0.5s ease in my CSS, I can't seem to get a transition effect working. Is it not possible to achieve this because of the sibling selector, or am I missing something?
Check out the fiddle: https://jsfiddle.net/nicoleamurray/zap1L8hq/ to see the mobile version.
UPDATE: Successfully implemented with the use of height!
`.mainmenu{
float: right;
text-align: right;
}
.mainmenu li{
display:inline-block;
}
.mainmenu li:nth-child(4):hover ~ li{
opacity:1;
transition-delay: 0s;
height: 20px;
}
.mainmenu li:nth-child(n+5){
opacity:0;
overflow: hidden;
height: 0;
display: block;
transition: all 0.5s 1s;
}`