CSS3 transition for opacity on hover does not work - css

Question

I am building a navigation that's going to fade in and out a dropdown sub menu. Because I want to build it in pure CSS, I am trying to use a transition. But whatever I do, it does not work, though it seems to be the correct way.
I define the hidden, normal version of the sub list to be display none and opacity 0, telling it to use transitions. And then, on hover of its parent it shall be display-block'd and the opacity should be transitioned.
Where's the problem here?
CSS:
#nav-main>ul>li>ul {
display: none;
opacity: 0;
position: absolute;
top: 2rem;
background-color: #fef1a3;
margin: 0;
padding: 0.25rem 0;
text-align: center;
list-style: none;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear
}
#nav-main>ul>li:hover>ul {
display: block;
opacity: 1
}
HTML:
<nav id="nav-main">
<ul>
<li>
Link 1
<ul>
<li>
Link 1.1
</li>
</ul>
</li>
</ul>
</nav>
For your reference, here's a fiddle (don't mind the call for transitioning "all" instead of just "opacity", tried both :-) ):
https://jsfiddle.net/hzhnqx1r/
Tried it in Firefox and Safari so far. Both have the same problem.
Thanks for your help!

Answer 1

Transitions will not work if you toggle the display property to/from none.
(MDN: Which CSS properties are animatable)
A trick is to move it in/out of sight as well.
A simplified example (of your code)
#nav-main>ul>li>ul {
opacity: 0;
position: absolute;
top: 1rem;
left:-9999rem;
transition: opacity 0.5s linear 0s, left 0s linear 0.5s;
}
#nav-main>ul>li:hover>ul {
opacity: 1;
left:0;
transition: opacity 0.5s linear;
}
What we do here is we initially place the ul way off the screen (left:-9999rem and set it to 0 on :hover
Using a delay on the left property animation when un-hovering to allow the fadeout to be visible.
Demo at https://jsfiddle.net/hzhnqx1r/3/

Answer 2

Then you don't need to display: none and display: block on hover.
like this
#nav-main>ul>li>ul {
opacity: 0;
position: absolute;
top: 2rem;
background-color: #fef1a3;
margin: 0;
padding: 0.25rem 0;
text-align: center;
list-style: none;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-khtml-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear
}
#nav-main>ul>li:hover>ul {
opacity: 1
}

Answer 3

For your knowledge opacity property value work with in 0-0.9
I also updated your fiddle reference for your better understanding
https://jsfiddle.net/hzhnqx1r/2/